100% height child div in auto height parent

I have been looking all around the internet for the last couple of hours to find an answer for my question. I read the Floats 101 article on alistapart as well as a ton of similar questions on stackoverflow. I think it's finally time I asked the question as to prevent my head from exploding.

Wh开发者_如何学Cat I have trying to do : A container with a fixed width contains a 100% width div which has two children. The div expands vertically to the content inside it. The two children form columns within the parent div so are therefore floated to place them side by side. The left column expands to the height of the parent div and has a background color. The right column doesn't have a background color and determines the height of the parent div.

It is really hard to explain so I tried to create an example: http://jsfiddle.net/bituser/LzNuN/1/

I would really appreciate your help. Thanks

Don't float the right column at all, just give it a large enough margin to accommodate the left column. Floated elements are removed from the normal document flow and contribute nothing to the height of their parent; so, if you float both the right and left columns, your red #box element ends up with no height and you don't see it; if you stop floating the right column, then it really will determine the height of #box. If you don't float #right_column at all then it will expand to use all of the available width in #box.

Something like this:

<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 fiddle: http://jsfiddle.net/ambiguous/eDTdQ/

Alternatively, you could add a width: 200px to #right_column and let it keep floating, then add overflow: hidden to #box so that #box expands to contain its floated 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 auto-stretch and you want both columns to be full-height, then you can absolutely position the left column instead of floating it:

#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/

look at this: http://jsfiddle.net/LzNuN/3/ you need to add the margin to the total width - the margin-left of the right column is not margin left from the parent it is margin left from the left column so if you total is 400px and your left column is 200px and your right column is also 200px there is no room for margin