Float a div without defining height property

Question

It looks very simple (and maybe is, just got stucked) -> just for fun, no practical need right now.

I got this:

Answer 1

An alternative approach that does not use CSS tables is as follows:

.master {
    width: 100%;
    height: 100%;
    border: 1px dotted blue;
    position: relative;
}
.left {
    width:10%;
    background: red;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.right {
    width: 89%;
    margin-left: 11%;
    overflow: auto;
    background: blue;
    color: #FFF;
}

If the .right block is the one that controls the overall height, keep .right in regular content flow and set margin-left: 11% to leave some white space.

Use absolute position to place and size the .left block.

See demo at: http://jsfiddle.net/audetwebdesign/97CY2/

However, if you don't know which of the two child elements is the taller, than table-cell's would be the way to go.