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).

This is one of the most frequently asked question all over the internet. Google supplies hundreds of solutions. — Rob, Dec 27 '10 at 12:18

score 10 · Answer 1 · answered Dec 27 '10 at 11:54

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.

score 3 · Answer 2 · answered Dec 27 '10 at 14:33

I agree with @haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.

So try something like this:

CSS

.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}

HTML

<div class="col-wrapper">
    <div class="col col-670">[Page Content]</div>
    <div class="col col-250">[Page Sidebar]</div>
</div>

score 1 · Answer 3 · answered Apr 04 '14 at 09:59

I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:

<div class="grid">
    <div class="col-1-2">
       <div class="content">
           <p>...insert content left side...</p>
       </div>
    </div>
    <div class="col-1-2">
       <div class="content">
           <p>...insert content right side...</p>
       </div>
    </div>
</div>

I use it for all my projects.

haha · Answer 4 · 2010-12-27T14:21:40.210

1

Basically you need 3 divs. First as wrapper, second as left and third as right.

.wrapper {
 width:500px;
 overflow:hidden;
}

.left {
 width:250px;
 float:left;
}

.right {
 width:250px;
 float:right;
}

Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/

CSS Cheat Sheet for reference

edited Dec 27 '10 at 14:21

answered Dec 27 '10 at 12:29

haha

1,522
2
15
18

score -9 · Answer 5 · answered Dec 27 '10 at 12:11

-9

The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.

They perform better than CSS
They work on all browsers without any fuss
You can debug them easily with the border=1 attribute

answered Dec 27 '10 at 12:11

sproketboy

8,967
18
65
95

This is against standards and your solution is hardcoded into html files. Try to change width of one column by say 5px when you have 1000+ websites. You will have to spend lifetime doing this, while in css it will take 10 seconds. Nevertheless I agree with you to some extent. I had no problems using tables years ago and found css a bit counter intuitive at first. Plus, all the browsers still render css differently and still css is pain in the ass in general. – Vonder Dec 27 '10 at 14:34
1

This is the highest voted [css] question: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html. Go read it, then come back when you can refute *all* of the arguments, go write a blog post about them. Stack Overflow is not the place to rant or scream or curse - this answer doesn't answer the OP's question, that's why it was voted down. Period. – Yi Jiang Dec 27 '10 at 18:31

How to create two columns on a web page?

5 Answers5

Linked

Related