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    lt table gt      lt tr gt         lt td gt           Content of the first column         lt  td gt         lt td gt           Content of the second column         lt  td gt      lt  tr gt   lt  table gt    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

User · Answer

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.

User · Answer

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   lt div class  col-wrapper  gt       lt div class  col col-670  gt  Page Content  lt  div gt       lt div class  col col-250  gt  Page Sidebar  lt  div gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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

[html] How to create two columns on a web page?

Examples related to html

Examples related to css

Examples related to html-table