5 ms·

CSS offers many solutions to layout. The problem is what a lot of web surfers are stuck with old versions of some particular browser.

haberman 16y ago
What solution does CSS offer for three-column layout (with a resizable center column) that is remotely as simple as: <table width=100%><tr> <td width="200px">Fixed left column. <td>Liquid center column <td width="200px">Fixed right column. </table>
- null_ptr 16y ago
  <div id="site"> <div id="left">Fixed left column.</div> <div id="middle">Liquid center column</div> <div id="right">Fixed right column.</div> </div> The whole point of CSS is to take things like width="200px" out of the markup.
  - haberman 16y ago
    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/
  - nokcha 16y ago
    >The whole point of CSS is to take things like width="200px" out of the markup. I don't see how that's really an improvement in this particular case. In fact, I would say that using 'width="200px"' inline may actually be more readily understandable and maintainable than having the style defined somewhere else and then used only once. (I'm assuming that the 'width="200px"' is not duplicated multiple times in the PHP/Python/Arc/etc code that generates the HTML page. If the same style needs to be identified multiple times in the source code, then of course it may be a better idea to define it once and thereafter refer to it by name.) Are there any practical benefits that I may be missing?
    - billybob 16y ago
      How do you know when you use a style the first time that you'll never use it elsewhere? If you've got many one-off style declarations, you probably don't have a very consistent graphical style. Besides that, it's nice to know where all your styles live instead of having to grep your whole project. And inline styles take precedence over everything else, so mixing them with stylesheets can create havoc.
    - olavk 16y ago
      The example is contrived because there is no content in the table cells. In the real world there will be some content, and suddenly your "width"-attributes are many lines apart and not nicely aligned. This makes is a mess to maintain, because there is no single place where your layout is defined; the information is spread all over the document, mixed with other kinds of information. Furthermore, separating style info into a style sheet allows you to adapt the style for different devices.
  - flomo 16y ago
    > The whole point of CSS is to take things like width="200px" out of the markup. IIRC, you could stick the TD's width value in a CSS class and it would work exactly the same.
- haberman 16y ago
  I looked into CSS tables a bit more, and this seems to be how you'd write the above: <style type="text/css"> .table { display: table; width: 100%; } .tr { display: table-row; } .left-column { display: table-cell; width: 200px; } .middle-column { display: table-cell; } .right-column { display: table-cell; width: 200px; } </style> <div class="table"><div class="tr"> <div class="left-column">Fixed left column.</div> <div class="middle column">Liquid center column.</div> <div class="right-column">Fixed right column.</div> </div></div> This is definitely a huge improvement over the CSS box model. If this had been available in practice 10 years ago, I probably wouldn't be complaining about it now. But I still think it is because CSS2 is so big, complicated, and had so many errors that it wasn't implemented for so long.
  - BrandonM 16y ago
    That's so much more verbose than using tables. What do you gain?
    - deleted 16y ago
      [deleted]
    - mdaniel 16y ago
      Without actually trying that code, my guess is that unlike a formal "table", those 3 div tags will have different page-wrap behavior (e.g. not intra-div, but the wrapping of the div elements with respect to the screen width). That may not appear to be a big deal, but try loading that page on a mobile device and it will become a bigger deal.
    - olavk 16y ago
      It gives you separation of concerns between content structure and presentation. This allows you to adapt the presentation for different audiences. For example, on a phone with a small screen, you might not want a three-column layout, but just have everything in one column. You can do that with an alternative style-sheet. Additionally, you don't have to confuse screen readers with a table which don't really contain tabular data. So it also more accessible.
- drdaeman 16y ago
  Upcoming CSS3 features (some browsers support some, but not others). <section id="box"> <div class="left">...</div> <div class="center">...</div> <div class="right">...</div> </section> - Template layout module (W3C) #box { display: ' a b c' 200px * 200px; width: 100%; } #box .left { position: a; } #box .center { position: b; } #box .right { position: c; } - Flexible box model (Mozilla) #box { display: box; box-orient: horizontal; width: 100%; } #box .left, #box .right { width: 200px; } #box .center { box-flex: 1; } - Grid positioning module (Microsoft) #box { columns: 3; grid-columns: 200px * 200px; } #box.left, #box.right { width: 200px; } Disclaimer: I didn't test anything, just wrote the code from memory, peeking at random on-subject Google results. It is possible that I forgot, misspelled or misunderstood something.
- kleiba 16y ago
  That is because you picked an example where an old school HTML table shines and CSS looks complicated. But likewise there are many other things you can do with CSS that are pretty hard or impossible to do without it. If webpages were always only made of box-like structures, CSS would have never made it. But you will admit that it offers a web designer much more flexibility. That flexibility comes at a cost though, because some examples (like yours) that were very easy to realize with the very limited layout options pure HTML offered have now become more difficult. But that's because it provides a more general approach that takes care of many problems, not just three-column layout, and must thus be flexible. And flexible is what old timer HTML was not. I'm not saying that CSS is the best or even a very good solution to the problem. I'm sure there are a lot of different approaches how to address the general problem of dividing content and layout. But it's there now, and it's bearable, I think. Besides... all of what I wrote has nothing to do with the w3c :-)

haberman 16y ago

What solution does CSS offer for three-column layout (with a resizable center column) that is remotely as simple as: <table width=100%><tr> <td width="200px">Fixed left column. <td>Liquid center column <td width="200px">Fixed right column. </table>

null_ptr 16y ago
<div id="site"> <div id="left">Fixed left column.</div> <div id="middle">Liquid center column</div> <div id="right">Fixed right column.</div> </div> The whole point of CSS is to take things like width="200px" out of the markup.
- haberman 16y ago
  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/
- nokcha 16y ago
  >The whole point of CSS is to take things like width="200px" out of the markup. I don't see how that's really an improvement in this particular case. In fact, I would say that using 'width="200px"' inline may actually be more readily understandable and maintainable than having the style defined somewhere else and then used only once. (I'm assuming that the 'width="200px"' is not duplicated multiple times in the PHP/Python/Arc/etc code that generates the HTML page. If the same style needs to be identified multiple times in the source code, then of course it may be a better idea to define it once and thereafter refer to it by name.) Are there any practical benefits that I may be missing?
  - billybob 16y ago
    How do you know when you use a style the first time that you'll never use it elsewhere? If you've got many one-off style declarations, you probably don't have a very consistent graphical style. Besides that, it's nice to know where all your styles live instead of having to grep your whole project. And inline styles take precedence over everything else, so mixing them with stylesheets can create havoc.
  - olavk 16y ago
    The example is contrived because there is no content in the table cells. In the real world there will be some content, and suddenly your "width"-attributes are many lines apart and not nicely aligned. This makes is a mess to maintain, because there is no single place where your layout is defined; the information is spread all over the document, mixed with other kinds of information. Furthermore, separating style info into a style sheet allows you to adapt the style for different devices.
- flomo 16y ago
  > The whole point of CSS is to take things like width="200px" out of the markup. IIRC, you could stick the TD's width value in a CSS class and it would work exactly the same.
haberman 16y ago
I looked into CSS tables a bit more, and this seems to be how you'd write the above: <style type="text/css"> .table { display: table; width: 100%; } .tr { display: table-row; } .left-column { display: table-cell; width: 200px; } .middle-column { display: table-cell; } .right-column { display: table-cell; width: 200px; } </style> <div class="table"><div class="tr"> <div class="left-column">Fixed left column.</div> <div class="middle column">Liquid center column.</div> <div class="right-column">Fixed right column.</div> </div></div> This is definitely a huge improvement over the CSS box model. If this had been available in practice 10 years ago, I probably wouldn't be complaining about it now. But I still think it is because CSS2 is so big, complicated, and had so many errors that it wasn't implemented for so long.
- BrandonM 16y ago
  That's so much more verbose than using tables. What do you gain?
  - deleted 16y ago
    [deleted]
  - mdaniel 16y ago
    Without actually trying that code, my guess is that unlike a formal "table", those 3 div tags will have different page-wrap behavior (e.g. not intra-div, but the wrapping of the div elements with respect to the screen width). That may not appear to be a big deal, but try loading that page on a mobile device and it will become a bigger deal.
  - olavk 16y ago
    It gives you separation of concerns between content structure and presentation. This allows you to adapt the presentation for different audiences. For example, on a phone with a small screen, you might not want a three-column layout, but just have everything in one column. You can do that with an alternative style-sheet. Additionally, you don't have to confuse screen readers with a table which don't really contain tabular data. So it also more accessible.
drdaeman 16y ago
Upcoming CSS3 features (some browsers support some, but not others). <section id="box"> <div class="left">...</div> <div class="center">...</div> <div class="right">...</div> </section> - Template layout module (W3C) #box { display: ' a b c' 200px * 200px; width: 100%; } #box .left { position: a; } #box .center { position: b; } #box .right { position: c; } - Flexible box model (Mozilla) #box { display: box; box-orient: horizontal; width: 100%; } #box .left, #box .right { width: 200px; } #box .center { box-flex: 1; } - Grid positioning module (Microsoft) #box { columns: 3; grid-columns: 200px * 200px; } #box.left, #box.right { width: 200px; } Disclaimer: I didn't test anything, just wrote the code from memory, peeking at random on-subject Google results. It is possible that I forgot, misspelled or misunderstood something.
kleiba 16y ago
That is because you picked an example where an old school HTML table shines and CSS looks complicated. But likewise there are many other things you can do with CSS that are pretty hard or impossible to do without it. If webpages were always only made of box-like structures, CSS would have never made it. But you will admit that it offers a web designer much more flexibility. That flexibility comes at a cost though, because some examples (like yours) that were very easy to realize with the very limited layout options pure HTML offered have now become more difficult. But that's because it provides a more general approach that takes care of many problems, not just three-column layout, and must thus be flexible. And flexible is what old timer HTML was not. I'm not saying that CSS is the best or even a very good solution to the problem. I'm sure there are a lot of different approaches how to address the general problem of dividing content and layout. But it's there now, and it's bearable, I think. Besides... all of what I wrote has nothing to do with the w3c :-)