Jump to content

floated divs and containment


Recommended Posts

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

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.

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

  • 3 weeks later...

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...