Layout using divs

Question

I have done some research on layouts and apparently using HTML tables to layout your page is BAD. So the alternative is to make use of div's.

I have the following layout designed and want to know how I would implement this with the use of div's. Specifically, how I would get the 3 panels at the top to be aligned vertically with a panel at the bottom that stretched the length of all three panels.

Would I be able to do this purely with CSS and HTML?

Here is the design:

Answer 1

The <table> element has no semantical significance when used for layouts. It should be used for data grids only.

That said, CSS has a good alternative:

display: table;

and

display: table-cell;

See this example.

Your layout consists of two separate "tables". There is also table-row to create columns with the same width over multiple rows. It doesn't have alternatives to colspan, thead and other table specific elements, but it should do the job for a simple layout.

Answer 2

Yes, it's perfectly possible in pure CSS and HTML.

Consider this code:

.small-box {
          width: 200px;
          height: 200px;
          float: left;
          border: 1px solid #ccc;
        }
        
        .large-box {
          width: 606px;
          height: 200px;
          clear: both;
          border: 1px solid #ccc;
        }

<div class="small-box">some content</div>
       <div class="small-box">Some other content</div>
       <div class="small-box">Another content</div>
       <div class="large-box">Large box content</div>

The most important thing here is the use of float and clear attributes. You can make divs stick together in a single line with float attribute and if you want something beneath them use clear to 'push' the next element below. One thing though, to use float, the element has to have width attribute defined.