How to create two columns on a web page?

Question

I want to have two columns on my web page. For me the simples way to do that is to use a table:

<table>
   <tr>
      <td>
         Content of the first column.
      </td>
      <td>
         Content of the second column.
      </td>
   </tr>
</table>

I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.

However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?

I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).

Answer 1

i recommend to look this article

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

see 4. Place the columns side by side special

To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.

    #main {
    float:left;
    width:500px;
    background:#9c9;
    }
    #sidebar {
    float:right;
    width:250px;
   background:#c9c;
   }

Note that the sum of the widths should be equal to the width given to #wrap in Step 3.