Geek Answers Handbook

100% child div height in auto parent height

I have been browsing the Internet for the past couple of hours to find the answer to my question. I read the Floats 101 article on alistapart, as well as a ton of similar questions about stackoverflow. I think that in the end I asked a question so that my head would not catch fire.

What I'm trying to do: A fixed-width container contains a 100% divider that has two children. The div expands vertically to the contents within it. Two children form columns in the parent div, which is why they are placed next to each other. The left column expands to the height of the parent div and has a background color. The right column has no background color and determines the height of the parent div.

It’s very difficult for me to explain, so I tried to create an example: http://jsfiddle.net/bituser/LzNuN/1/

I am very grateful for your help. Thanks

+4
source share
2 answers

Don't float the right column at all, just give it a large enough margin to fit the left column. Floating elements are removed from the normal flow of documents and do not affect the height of their parent; therefore, if you are floating both on the right and on the left, your red #box element has no height, and you do not see it; if you stop swimming in the right column, then it really determines the height of #box . If you don't #right_column at #right_column , then it will expand to use the entire available width in #box .

Something like that:

 <div id="container"> <div id="box"> <div id="left_column"> <p>details stuff yada yada yada</p> </div> <div id="right_column"> <p>other stuff yada yada yada test test test test test stuff stuff content content content content content stuff stuff example stuff test stuff content content stuff content example</p> </div> </div> </div>

CSS

 #container { width: 400px; } #box { background-color: red; } #left_column { width: 200px; background-color: blue; float: left; } #right_column{ margin: 0 0 0 200px; background-color: green; }

Updated script: http://jsfiddle.net/ambiguous/eDTdQ/

Alternatively, you can add width: 200px to #right_column and leave it floating, and then add overflow: hidden to #box so that #box expands to contain its floating children:

 #box { background-color: red; overflow: hidden; } #right_column{ background-color: green; float: left; width: 200px; }

Live version of this approach: http://jsfiddle.net/ambiguous/eDTdQ/2/

If you want the right column to be stretched automatically, and you want both columns to be full, you can absolutely position the left column rather than float.

 #box { background-color: red; position: relative; } #left_column { width: 200px; background-color: blue; position: absolute; top: 0; left: 0; bottom: 0; }

Live: http://jsfiddle.net/ambiguous/3Cxe3/

+6
source

look at this: http://jsfiddle.net/LzNuN/3/ you need to add a margin to the total width - the left side of the right column is not the margin to the left of the parent, but the margin to the left of the left column, so if the sum is 400 pixels, and your left column is 200 pixels and the right column is also 200px there is no space for the field

+1
source

More articles:


All Articles