3 ms·

You have to show what your CSS would be also. My point is that the CSS you have to write to get your example to look like mine is extremely complicated when al

You have to show what your CSS would be also. My point is that the CSS you have to write to get your example to look like mine is extremely complicated when all you have is the box model.

rimantas 16y ago
There is nothing complicated, even using floats. Usig display: table-* it's damn easy. You also got CSS columns, and flex box.
Groxx 16y ago
Like this: #left{ float:left; width:200px; margin-right: -200px; } #right{ float:right; width:200px; margin-left: -200px; } #middle{ float: left; margin-left: 200px; margin-right: 200px; } People tend to avoid this relatively simple solution because of the double-left-margin bug in IE 5 & 6, but that's getting to be an excessively old set of browsers. And even then, it's usually fixed with a "display:inline;" on the ones with left margins. edit: it's not an ideal solution, as it has those negative values which have to match the related positive ones. Which is solved with something like Sass or Less, because CSS lacks any "programming" abilities, which I see as its main failure. Even variables and simple math would be acceptable, but instead, nothing.
- kerryfalk 16y ago
  Or, to make it _really_ simple: <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> div.column { margin: 10px; width: 200px; float: left; } EDIT: Missed the key constraint, resizable center column. What I have above won't work for that, but shows that replacing tables isn't very difficult.
  - yid 16y ago
    Nope, not quite. Resize your window to less than 600px and see what happens.
    - kerryfalk 16y ago
      You can wrap the above in another div with a width of 660px or greater and it'll have the same effect as a table if the window width is less than the width of the columns (plus margins/padding).
- Groxx 16y ago
  Downvote? It's correct, and it's exactly what was asked for. Here's a Fiddle demonstrating it: http://jsfiddle.net/yBs5V/ http://jsfiddle.net/yBs5V/

You have to show what your CSS would be also. My point is that the CSS you have to write to get your example to look like mine is extremely complicated when all you have is the box model.

rimantas 16y ago

There is nothing complicated, even using floats. Usig display: table-* it's damn easy. You also got CSS columns, and flex box.

Groxx 16y ago

Like this: #left{ float:left; width:200px; margin-right: -200px; } #right{ float:right; width:200px; margin-left: -200px; } #middle{ float: left; margin-left: 200px; margin-right: 200px; } People tend to avoid this relatively simple solution because of the double-left-margin bug in IE 5 & 6, but that's getting to be an excessively old set of browsers. And even then, it's usually fixed with a "display:inline;" on the ones with left margins. edit: it's not an ideal solution, as it has those negative values which have to match the related positive ones. Which is solved with something like Sass or Less, because CSS lacks any "programming" abilities, which I see as its main failure. Even variables and simple math would be acceptable, but instead, nothing.

kerryfalk 16y ago
Or, to make it _really_ simple: <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> div.column { margin: 10px; width: 200px; float: left; } EDIT: Missed the key constraint, resizable center column. What I have above won't work for that, but shows that replacing tables isn't very difficult.
- yid 16y ago
  Nope, not quite. Resize your window to less than 600px and see what happens.
  - kerryfalk 16y ago
    You can wrap the above in another div with a width of 660px or greater and it'll have the same effect as a table if the window width is less than the width of the columns (plus margins/padding).
Groxx 16y ago
Downvote? It's correct, and it's exactly what was asked for. Here's a Fiddle demonstrating it: http://jsfiddle.net/yBs5V/ http://jsfiddle.net/yBs5V/