ansaurus

Question

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

Answer 1

A:

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/

Alec 2010-10-10 13:55:01

i'll take that as a no, thx :) table is no solution for me as the source order is not as desired, i'm going to wrap the two fixed width columns in one div, then its possible...

Joe Hopfgartner 2010-10-10 18:36:08

ansaurus

tags:

views:

answers:

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

related questions