chadmichael Posted May 22, 2006 Share Posted May 22, 2006 Hello,I've got a question about layout flow. I've simplified my question with a code sample. The code sample simply has three divs. One div is a container div to hold the other two. My desired effect is to have a menu element to the left and then a view element that I will float right. This will leave the menu and the view elements next to each other. I've got this to work but encountered an unexpected behavour. The unexpected behavour pertains to the ordering ( with in the markup ) of the two divs that I place inside the containing div. If I put the floated div first, everything works. If I put the floated div second, it ends up getting kicked out of the contianer div altogether, and that's no good!The markup. <html><head><link rel="stylesheet" type="text/css"href="floatTest.css" /> </head><body bgcolor="777777"> <div id="container"> <div id="fullView"> </div> <div id="menu"> </div> </div></body></html> The Stylesheet: "floatTest.css" #container { background-color: #88ff33;}#menu{ background-color: #ffff22; width: 150px; height: 500px; overflow:auto;}#fullView { background-color: #991133; width: 300px; height: 300px; float:right;} Can someone explain why this happens? Link to comment Share on other sites More sharing options...
aspnetguy Posted May 23, 2006 Share Posted May 23, 2006 If you have 2 divs in the container you will need to float both of them. If you place <br style="clear:both"/>as the last line of the container it will keep the floated elements contained. Link to comment Share on other sites More sharing options...
chadmichael Posted May 23, 2006 Author Share Posted May 23, 2006 If you have 2 divs in the container you will need to float both of them. If you place <br style="clear:both"/>as the last line of the container it will keep the floated elements contained.<{POST_SNAPBACK}> Thanks for the info. Is there some logic to this behaviour? I mean, it seems to me that they should stay in the containing div no matter what. Link to comment Share on other sites More sharing options...
aspnetguy Posted May 24, 2006 Share Posted May 24, 2006 That is the way it works in IE but all other browsers require you to clear the floated elements . I am not sure why it is that way but that is just how it works Link to comment Share on other sites More sharing options...
chadmichael Posted June 14, 2006 Author Share Posted June 14, 2006 Well, I took the advise above and added the <br style="clear:both"/> at the end of the containing div. Now, on explorer, the container doesn't grow to the height of the two contained divs. So, when I color the container div and expect it to color the entire thing, it just colors a horizontal band across the top of the two contained divs.Check out the following code.HTML page <html><head><link rel="stylesheet" type="text/css"href="blogTest.css" /></head><body><div id="content"> <!-- Entries --> <div id="blogEntries" > <p>askdfjasdkf ksjdfkjksa dfksajd fkjasdfkja sdfkj askdf jkas ddd ddddd ddddd ddddd dddddd dddddddddd ddddd ddddddddd ddddd</p> </div><!-- END of ENTRIES DIV --> <!-- START NAVIGATION COLUMN ---> <div id="blogMenu" > <p>asdkfj kjasdkfj skdjk kjds ksjdkf flkjakd fkajd fkajsdkj fkjasd kjf kajdsf kkkk kkkkk kkk k kkkkk kkkkk kkkk kkkk kkk kk</p> </div><!-- END of NAV COLUMN --><br style="clear: both"/> </div></body></html> And the style sheet: blogTest.css #content { background-color: #ddeecc; }#blogMenu{ width:30%; float:right;padding-right: 2%;}#blogEntries { width:65%; float:left;padding-right: 2%; } So, in firefox the coloring of the container div colors all the contained divs. But on explorer it doesn't? Does anyone know what to do? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now