|
Posted by listerofsmeg01 on November 5, 2006, 11:37 am
Please log in for more thread options
listerofsme...@hotmail.com wrote:
> Argh! I'm going nuts trying to get a constant margin after a floated
> div that works cross browser.
>
> This works in IE but not Firefox:
>
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head></head>
> <body>
> <div style="float:left; height:100px; background-color:red;">Hi,
> I'm floating</div>
> <div style="clear:both; margin-top:50px;">This text should have a
> margin after the floated div</div>
> </body>
> </html>
>
> This works in both IE and firefox, but not Opera
>
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head></head>
> <body>
> <div style="float:left; height:100px; background-color:red;">Hi,
> I'm floating</div>
> <div style="clear:both;"></div>
> <div style="margin-top:50px;">This text should have a margin after
> the floated div</div>
> </body>
> </html>
>
> It appears Opera only honours the clearing div for margins if it
> contains something. However, if it contains something, then I get extra
> whitespace which I can't seem to get rid of. ie:
>
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head></head>
> <body>
> <div style="float:left; height:100px; background-color:red;">Hi,
> I'm floating</div>
> <div style="clear:both; margin:0; border:0;
> padding:0;"> </div>
> <div style="margin-top:50px;">This text should have a margin after
> the floated div</div>
> </body>
> </html>
>
> This appears to work fine, until you make the margin smaller - say 2
> pixels:
>
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head></head>
> <body>
> <div style="float:left; height:100px; background-color:red;">Hi,
> I'm floating</div>
> <div style="clear:both; margin:0; border:0;
> padding:0;"> </div>
> <div style="margin-top:2px;">This text should have a margin after
> the floated div</div>
> </body>
> </html>
>
> Where's the sodding whitespace coming from! Argh!
>
> Many thanks for any help
I should add that the bottom 2 examples have a non breaking whitespace
in the clearing div, but this has disappeared from my post (I guess it
got translated by my browser!)
| 
XML Sitemap