Main content
This is an example of how to create a liquid two column layout. The idea is pretty simple: you float a left colum to achieve a two column layout with header and footer.
It builds on the technique, seen in the Liquid three column Template. 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, just as with the three columns layout, IE has a problem. 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. Also the border will breake into pieces. IE/win thinks that there isn't enough room to hold the side column and the center one within the 90% width of the container. Other browsers just correctly overlap the content. This behavior will start around about 350px 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 column. If not, the border of the main content will be cut off. This is because the border is set on the main content. So if you need the left column content to be larger, you need to set the border to the right side of the left column.
