I am trying to create a variable height div. It seems if the div's inside the variable height div are set to float:left The variable height div gets a height of 0. If I set the variable height div float:left the div grows with the content inside it but now the variable height div is sent to the left of the screen instead of the center. How do I keep the main div in the center but also have it grow with it's child div's?
-
What do you have so far, code wise?ngen– ngen2011-06-14 16:31:47 +00:00Commented Jun 14, 2011 at 16:31
-
an overflow: hidden on the parent div is enoughlipelip– lipelip2011-06-14 16:33:51 +00:00Commented Jun 14, 2011 at 16:33
Add a comment
|
5 Answers
<div id="VariableHeightDiv">
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="clear"></div>
</div>
and in your css .clear{clear:both;}
You need to clear the floats, otherwise the browser is unable to understand and calculate correctly the height of the container div. That is why in the end we add an empty div with clear:both.
5 Comments
Sotiris
but creating an additional element is redundant.
Pantelis
It can be redundant in some cases that is true. But If you don't specify width for the element then it won't work on IE6. And sometimes having to specify a value for width, or even setting the overflow to hidden (which is meant for other, more obvious uses) - can mess with the existing layout, and end up being a greater hassle.
Wex
I'd have to agree with Sotiris, I've never run into a case where additional markup was necessary.
overflow: auto does fine for me.Pantelis
Here's a quick example (for IE6) <div id="test"> <div class="floatLeft"></div><div class="floatLeft"></div> </div> and the css for #test, #test{padding:10px;} if you want it to work on IE6, you need to add overflow:auto plus, width: something; If we add, width:100%, the paddings will be added to that and the div will expand beyond the expected. We can counter that with paddings within the child elements etc etc. But why get in all that hacky trouble? Simply depends to how your layout is designed up to that point and if you support obsolete browsers.
Sotiris
Reading specification of float at w3.org/TR/CSS2/visuren.html#comp-float we see the following "Text flows normally up to the inner box, which is pulled out of the flow and floated to the right margin (its 'width' has been assigned explicitly)." So there is no point to add float for children elements without specify width. If you do this then works great in ie6 also jsfiddle.net/ZXkYJ
Adding overflow: auto; to your main div will keep it centered, and will also force it to wrap around the elements inside of it. Two great articles on the float property and the overflow property can be found here: http://css-tricks.com/all-about-floats/ / http://css-tricks.com/the-css-overflow-property/
I wouldn't recommend using the <div style="clear: both;"> technique, because it's unnecessary extra markup, and doesn't add anything to the presentation.
Comments
Floated divs are somewhat removed from the document's "flow". You can force a container div to completely surround its contents, even if they're floated, by using a clearing element afterwards:
<div>
<div style="float: left">blah blah</div>
<br style="clear: both" />
</div>
There's better methods detailed here.
Comments
For the main div, include these CSS rules:
margin: 0 auto;
overflow: auto;
Also make sure that you have a min-height and width property set for the main div.
Edit: I've included the overflow property as well.
Comments
add overflow:hidden or overflow:scroll or overflow:auto for the parent div.
More info http://www.quirksmode.org/css/clearing.html
example: http://jsfiddle.net/MbgH4/1
