This page presents several different HTML layout techniques mentioned in this article.
All examples have been tested using Firefox 2.0, Firefox 3.0, Safari 2.0.4, Safari 3.1.1, Opera 9.24, IE 7.0 and the W3C markup validator.
Problem
Let's consider a webpage featuring the following basic elements:
- two horizontally centered columns with different widths, full height and different background colours
- the text in the first column is aligned to the upper left corner
- the text in the second column is aligned to the lower right corner
Possible Solutions
- Example 1 (HTML table, no CSS) – This is how it was done in the last century. The height and bgcolor attributes of the table weren't part of any W3C specification. Nevertheless early browsers already supported them
- Example 2 (XHTML table, CSS2) – a typical layout table
- Example 3 (no XHTML table, CSS2) – so called tableless layout. This particular one does not use invisible background images, negative margins, javascript or other obscure techniques. However, the text in the right column will exceed the viewport if the user shrinks the browser window to a certain degree. Thus the text won't be fully readable anymore by using the browser scrollbars. Furthermore, if the text in the left column exceeds the viewpoint, the column won't strech down to the end. This page breaks easily
- Example 4 (no XHTML table, CSS2 table) – works flawlessly, except on MS Internet Explorer 7 (Here is a really ugly hack)
- Example 5 (XML, CSS2 table) – works flawlessly, except on MS Internet Explorer 7