Main content
This is an example of how to create a liquid three column layout. The idea is pretty simple: you float left and right columns to achieve a three column layout with header and footer.
The page has been grouped into separate div's, and each of these div's has been given a unique ID selector. I used a container to wrap around the entire page's content.
This layout is tested in Opera 7.21, Mozilla 1.4 and IE6, all on a win platform.
However there are some issues. When resizing the view port under 800x600,the header and the footer breaks apart in IE6. The top header and footer retract, leaving a gap between them and the container. IE/win thinks that there isn't enough room to hold the side columns and the center one within the 90% width of the container. 400px plus the associated paddings combined with the width of the word Main content, are more than will fit, so IE/win expands the box. Other browsers just correctly overlap the content. This behavior will start around about 640px of width. Unfortunately i do not know of a hack to cure this.
Another thing to notice is that the main column needs to be filled with more content then the left and right column. If not, the borders of the main content will be cut off. This is because the borders are set on the main content. So if you need the left or right column content to be larger, you need to set the borders accordingly.
