Simple two column html layout without using tables

Question

I'm looking for a super easy method to create a two column format to display some data on a webpage. How can i achieve the same format as:

<table>     <tr>         <td>AAA</td>         <td>BBB</td>     </tr> </table> 

I'm open to HTML5 / CSS3 techniques as well.

Answer 1

<style type="text/css"> #wrap {    width:600px;    margin:0 auto; } #left_col {    float:left;    width:300px; } #right_col {    float:right;    width:300px; } </style>  <div id="wrap">     <div id="left_col">         ...     </div>     <div id="right_col">         ...     </div> </div> 

Make sure that the sum of the colum-widths equals the wrap width. Alternatively you can use percentage values for the width as well.

For more info on basic layout techniques using CSS have a look at this tutorial

Answer 2

Well, you can do css tables instead of html tables. This keeps your html semantically correct, but allows you to use tables for layout purposes.

This seems to make more sense than using float hacks.

    #content-wrapper{       display:table;     }          #content{       display:table-row;     }          #content>div{       display:table-cell     }          /*adding some extras for demo purposes*/     #content-wrapper{       width:100%;       height:100%;       top:0px;       left:0px;       position:absolute;     }     #nav{       width:100px;       background:yellow;     }     #body{       background:blue;     }

<div id="content-wrapper">   <div id="content">     <div id="nav">       Left hand content     </div>     <div id="body">       Right hand content     </div>   </div> </div>