Search code examples
htmlcsstablelayout

Layout using divs

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: enter image description here

Solution

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