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.

Answer 2

You will need to use display:table on the container and display:table-cell on the children:

FIDDLE

CSS:

.master {
    width: 100%;
    height: 100%;
    display:table;
}
.left {
    background: red;
    display:table-cell;
    width:10%;
}
.left p {
    padding: 5px;
    color: #fff;
    text-align: center;
}
.right {
    border-left: 10px solid #fff;
    background: blue;
    color: #FFF;
    display:table-cell;
}
.right p {
    padding: 0px 15px 0px 15px;
    text-align: justify
}

Answer 3

I think the best way is:

.master {
    width: 100%;
    height: 100%;
    display: table;
}
.left {
    width:10%;
    height: 100%;
    float: left;
    background: red;
    display: table;
}
.right {
    width: 89%;
    margin-left: 1%;
    float: left;
    background: blue;
    color: #FFF;
    display: table;
}