Question

I need a table layout for a webpage, but since someone decided that we should no longer use <table>s to do it, I’m looking to do it with <div>‘s.

As far as I know, the standard way to do this is to apply float: left to subsequent <div>s that are supposed to fit on the same row. This tends to break the layout if I’m trying to center the page.

Is there a good way to create a table-based <div> layout without relying on floats? I long for the good old days when I could get a table-based layout done in three minutes using just <table>, <tr> and <td>.

Answer 1

This gives you an idea of what can be done:

<div id="wrapper">

    <div id="logo">
    </div>

    <div id="contact">
    </div>

    <br class="clear" />

    <div class="another">
    </div>

    <div class="another">
    </div>

</div>

CSS

#wrapper {width:600px; margin:0 auto; border:1px solid #000;} 
  // wrapper is a containing div.  margin 0 auto centers it

#logo {margin:0; padding:0; float:left; width:196px; 
    border:1px solid green; height:50px;}
  //get rid of the paddings and margin (same below)
  //as with #contact below, width adds up to 600px -4px for 1px border 
  //on each side 

#contact {margin:0; padding:0; float:left; width:400px; 
    border:1px solid red; height:50px;}

.another {height:100px; border:1px solid blue;}

.clear {clear:both;}
  //used to get content right after floated bits.

http://jsfiddle.net/jasongennaro/p4LpT/1/