Stretching 4 col template with two fixed columns in the middle and custom SOC. Possible?

Question

The html code source order should look like this:

<body>
    <div>col2</div>
    <div>col3</div>
    <div>col1</div>
    <div>col4</div>
</body>

and should look like this:

<----------------------100%----------------------->
+--------+-------------------+-----------+--------+
|  col1  |       col2        |    col3   |  col4  |
|        |                   |           |        |
| (100%  |      (664px)      |  (312px)  | (100%  |
| -976px)|                   |           | -976px)|
| /2 px  |                   |           |  /2 px |
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
+--------+-------------------+-----------+--------+

it should stretch to full width.
col2 should have a fixed width of 664px,
col3 should have a fixed wizth of 312px,
col1 and col4 should have equal width and fill the entire screen width.
this should be accomplished using css only.
all major browsers should support it

i could pack col2/col3 into another div container and essentially deal with a 3 col layout. but i would really like to avoid this extra container if possible. possible somehow? greetings, joe

Alec Alec · Accepted Answer · 2010-10-10T13:55:01

Even though using tables opposed to divs for layouts isn't really the way to go, in this case it might be your only option. The advantage is that a table's cells will use up all the available space, and you can combine specific widths with relative widths. You can accomplish the same with divs, but I don't think it can be done without doing some calculations with JavaScript.

Here's a quick example. The two middle cells have a fixed width; the outer cells will take up what's left. Make sure that the table is width enough though. And if there's going to be content in the outer cells, consider a min-width for these cells and add this to the min-width of the table.

HTML:

<table id="wrap">
    <tr>
        <td id="col1">col1</td>
        <td id="col2">col2</td>
        <td id="col3">col3</td>
        <td id="col4">col4</td>
    </tr>
</table>

CSS:

#wrap {
    min-width: 976px;
    width: 100%;
}
#wrap tr td {
    padding: 0;
    border-spacing: 0px;
}

#col1, #col4 {
  /* consider a min-width if there's content in these columns */
}
#col2 {
    width: 664px;
}
#col3 {
    width: 312px;
}

Example: http://jsfiddle.net/ukmBH/1/

Stretching 4 col template with two fixed columns in the middle and custom SOC. Possible?

1 Answers