Question

<div style="width: 800px; height: 600px">

    <div style="float:left; width: 100px">
        left fixed-width column
    </div>
    <div style="???">
        right stretching column (the width should be 700px in this case.)
    </div>

</div>

What’s the standard way to create two column layout where the left one is fixed-size and the right one stretches?

• I would like both columns’ styles are independent. I found a couple of solutions here, but if I change the width of the left column, the right column’s style (e.g. margin) need to be changed along with it.

• I don’t need to support old browsers. If it’s standard, it’s just okay.

Answer 1

Apply overflow: hidden to the second div. This will introduce a new block formatting context. You can find some more information in Can overflow:hidden affect layout?.

jsFiddle Demo