All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.
To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:
I've colour coded each div so it's easy to see when it's nat all black (?):
The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is inside colmask and colleft is inside colmid. The three column content divs (col1, col2 & col3) are inside colleft. Notice that the main content column (col1) comes before the other columns. CONFUSED YET?
Area 2. Donec hendrerit ullamcorper nulla vitae auctor. In rutrum convallis imperdiet. Phasellus pulvinar condimentum arcu vel ultricies. Sed hendrerit dapibus nunc, at dictum ante molestie eget.
Area 3.Donec hendrerit ullamcorper nulla vitae auctor. In rutrum convallis imperdiet. Phasellus pulvinar condimentum arcu vel ultricies. Sed hendrerit dapibus nunc, at dictum ante molestie eget.
Area 4. Donec hendrerit ullamcorper nulla vitae auctor. In rutrum convallis imperdiet. Phasellus pulvinar condimentum arcu vel ultricies. Sed hendrerit dapibus nunc, at dictum ante molestie eget.
JavaScript is not required. Donec hendrerit ullamcorper nulla vitae auctor. In rutrum convallis imperdiet. Phasellus pulvinar condimentum arcu vel ultricies. Sed hendrerit dapibus nunc, at dictum ante molestie eget.
Area 5. Donec hendrerit ullamcorper nulla vitae auctor. In rutrum convallis imperdiet. Phasellus pulvinar condimentum arcu vel ultricies. Sed hendrerit dapibus nunc, at dictum ante molestie eget.
Umpires. Donec hendrerit ullamcorper nulla vitae auctor. In rutrum convallis imperdiet. Phasellus pulvinar condimentum arcu vel ultricies. Sed hendrerit dapibus nunc, at dictum ante molestie eget.
Windows Sucks / Buy a MAC. Donec hendrerit ullamcorper nulla vitae auctor. In rutrum convallis imperdiet. Phasellus pulvinar condimentum arcu vel ultricies. Sed hendrerit dapibus nunc, at dictum ante molestie eget.
This 3 column liquid Layout has been tested on the following browsers:
The HTML in this layout validates as XHTML 1.0 strict.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices mi a purus placerat vel molestie risus posuere. Aliquam erat volutpat. Nam sed sapien quam, at iaculis neque. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit ullamcorper nulla vitae auctor. In rutrum convallis imperdiet. Phasellus pulvinar condimentum arcu vel ultricies. Sed hendrerit dapibus nunc, at dictum ante molestie eget. Maecenas vitae ipsum nec tellus vestibulum gravida id ut risus. Proin volutpat pellentesque feugiat. Donec vitae leo tellus, a pretium eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a neque eget tellus faucibus gravida. Etiam pellentesque lorem at elit tempor tincidunt.
This layout is fully compatible with cross-browser compatible centered menus.
