seanlim Posted October 25, 2009 Share Posted October 25, 2009 Hi guys, Need some help here. Just can't figure out what is wrong my floating divs... I have a 3 column layout and it works great, until i have an inline element in the content area with float:right. Take a look at the source code below... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title></title> </head> <body> <div> <div style="float:left;background-color:red;height:200px">Menu</div> <div style="float:right;clear:right;background-color:blue">Right</div> <div style="float:left; clear:left;background-color:green">Left</div> </div> <div style="background-color:orange"> <span>Some text</span><span style="float:right;background-color:yellow;clear:none;">Right Floated Span</span> </div> </body> </html> I would expect the Right Floated Span to be on the same line as "Some Text" (i.e. just to the left of "Right"). However, it seems to be appearing after the Menu, on the same line as "Left". What causes the Right Floated Span to float out of its orange div? Can't find a solution anywhere since this is rather specific... Any help is greatly appreciated! Quote Link to comment Share on other sites More sharing options...
cbolson Posted October 25, 2009 Share Posted October 25, 2009 Hi, With your code I am getting the "Left" column below the rest of the columns. Is this correct? Now, if I move this left-floated column to above the "Menu", it all seems to work correctly (ie your content spans are ligned up un the center column: <div> <div style="float:left; clear:left;background-color:green">Left</div> <div style="float:left;background-color:red;height:200px">Menu</div> <div style="float:right;clear:right;background-color:blue">Right</div> </div> <div style="background-color:orange"> <span>Some text here</span> <span style="float:right;background-color:yellow;clear:none;">Right Floated Span</span> <span style="clear:both;"></span> </div> However I am not totally convinced that that is what you want to do. Anyway, the thing is that the "offending" line is that left-floated layer. I hope that is of some help Chris Quote Link to comment Share on other sites More sharing options...
seanlim Posted October 25, 2009 Author Share Posted October 25, 2009 Thanks for your reply, Chris. I do want the "Left" div below the "Menu" div, sorry for not being clear about that. Ideally, the order of divs (left to right on the top line) should be Menu, Some Text, Right Floated Span, Right on the first line, with Menu stretching downwards longer than the others. Left will be immediately below Menu. FF, IE and Chrome all renders it the same way so I doubt its a browser-specific issue. The code also conforms to HTML strict so I really don't know what is wrong! Quote Link to comment Share on other sites More sharing options...
cbolson Posted October 25, 2009 Share Posted October 25, 2009 How about this: <div style="float:left;background-color:red;height:200px">Menu</div> <div style="float:right;clear:right;background-color:blue">Right</div> <div style="background-color:orange"> <span>Some text here</span> <span style="float:right;background-color:yellow;clear:none;">Right Floated Span</span> </div> <div style="float:left; clear:left;background-color:green">Left</div> Quote Link to comment Share on other sites More sharing options...
seanlim Posted October 25, 2009 Author Share Posted October 25, 2009 Thanks for your effort, Chris. Yes, I am trying to achieve that layout. Only thing is that Left gets "pushed" down when more content is added in the middle column! I've just managed to solve this after playing around with your code. I grouped the left-floated DIVs in a container and floated the entire container. For the record.... <div style="float:left"> <div style="background-color:red;height:200px">Menu</div> <div style="background-color:green">Left</div> </div> <div style="float:right;clear:right;background-color:blue">Right</div> <div style="background-color:orange"> <span>Some text here</span> <span style="float:right;background-color:yellow;clear:none;">Right Floated Span</span> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> From what I understand, browsers render floated DIVs in the order they are declared, regardless of their parent container (sounds weird, but see the example below). Hopefully this helps anyone wondering why their DIVs are floating erratically, or even outside of their containers. For example, ... div#div1 { float:left } div#div2 { float:left; clear:left } div#div3 { float:right; } ... <div id="div1"></div> <div id="div2"></div> <div> <div id="div3"></div> </div> div3 will appear in line with div2 and not display right at the top! Maybe this fact is obvious, but it stumped me for ages when it appeared in a more-complex 3 column layout. Thanks again, Chris! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.