Home/ Questions/Q 8045305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T05:30:22+00:00

Ok, I leaned html & css back in 2001. I was used to do

  • 0

Ok, I leaned html & css back in 2001. I was used to do something like this (To create a website with a “vertical-column” layout):

<html>
<head>
    <title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
    <tr>
    <td id="header" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / header -->

<!-- / content -->
    <tr>
    <td id="col1" name="menu"><!-- content code/php include --></td>
    <td id="col2" name="content_left"><!-- content code/php include --></td>
    <td id="col3" name="content_right"><!-- content code/php include --></td>
    </tr>
<!-- / content -->

<!-- footer -->
    <tr>
    <td id="footer" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / footer -->
</table>
</body>
</html>

Easy, everything is automatically aligned the way I want, no css headache etc. Life was good back then. HOWEVER, not so long ago, I read that this approach should no longer be used. I was going to try a new way using a bunch of div’s, but w3c & w3c’s validation does not like you using block elements as inline elements…WTF!!!

So…my frustration lead me to ask you guys:

HOW? How to accomplish something like this in “modern way”…as easy as possible? Does html 5 has a better way?
WHY? Why is it that now we should not use this table approach to get a “vertical column layout” on a website?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Below is a basic grid I cobbled together you can use with any size website. You’ll need to clear the floats on the columns with either overflow hidden or a clearfix. If your project doesn’t need to support IE7 you can use box-sizing border-box to add padding to your columns, otherwise add an extra element inside each column for padding.

    Whilst I can appreciate that making columns was super easy with tables that was pretty much the only thing they were better for layout wise.

    HTML:

    <!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <header></header>

    <div class="content grid">
        <div id="col1" class="col s1of3"></div>
        <div id="col2" class="col s1of3"></div>
        <div id="col3" class="col s1of3"></div>
    </div>

    <footer></footer>

</body>
</html>

    CSS:

    .grid {
}
    .grid .col { float: left; }

    .grid .col.s1of1 { width: 100%; }
    .grid .col.s1of2 { width: 50%; }
    .grid .col.s1of3 { width: 33.33333333%; }
    .grid .col.s2of3 { width: 66.66666666%; }
    .grid .col.s1of4 { width: 25%; }
    .grid .col.s3of4 { width: 75%; }
    .grid .col.s1of5 { width: 20%; }
    .grid .col.s2of5 { width: 40%; }
    .grid .col.s3of5 { width: 60%; }
    .grid .col.s4of5 { width: 80%; }
    • 0