Question

Say I have 2 divs side by side: 1 float left, and the other float right. Now say I fix the size of the left floating div to say 200px. How do I force the right floating div to “maximize” itself or occupy the rest of the horizontal screen space (regardless of the size of the browser window?

Answer 1

Here’s a solution (inverted, right is fixed 200px) for you using position:absolute.

Here’s a solution where the left is fixed 200px.

The method: you basically fix the left “sidebar” and add a margin to the right flexible column which is equivalent to the sidebar’s width.

The code looks like this:

.left {
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    background-color: #999;
}
.right {
    min-height: 100px;
    background-color: #666;
    margin-left: 200px; /* Same as left's width */
}​

They both work in IE6 as is.