Question

I’m working on a three column layout:

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

I’d like to make it so that the first two columns have a fixed width and that the third column takes up the rest of the space on the page. Just setting percentage widths for everything is an option, but not preferable.

An option I considered:

div#first {position: absolute; left: 0; top: 0; width: 150px;}
div#second {position: absolute; left: 150px; top: 0; width: 450px;}
div#third {margin-left: 600px}

I’ve used stuff like this in the past, but with limited success. Namely, I find that if there are any floated elements in #first or #second, cleared elements in #third would also clear those in #first and #second. While working without clears is possible, I’d a limitation I would like to avoid if possible.

I realized that my desired behaviour could indeed be produced by the following layout:

<table style="width: 100%">
  <tr>
    <td width=150"><div id="first"></div></td>
    <td width=450"><div id="second"></div></td>
    <td><div id="third"></div></td>
  </tr>
</table>

And while SEO is not an issue on this site, a table as the root node just feels wrong.

Answer 1

Sounds like you’re looking for something like this:

CSS

<style type="text/css">
  #first,#second {
    float: left;
  }

  #first {
    width: 150px;
    border: 1px solid red;
  }

  #second {
    width: 450px;
    border: 1px solid green;
  }

  #third {
    width: auto;
    overflow: auto;
    border: 1px solid blue;
  }
</style>

HTML

<div id="first">Left</div>
<div id="second">Middle</div>
<div id="third">Right</div>