Liquid CSS Layouts

The liquid (or fluid, as it is sometimes known) CSS layouts in this section of the site are all original code provided by Adam Senour and Search Engine Friendly Layouts. All of the XHTML, CSS, and Javascript code (if applicable) contained within may be reused free of charge. There are liquid layouts in both 2-column and 3-column styles.

The graphic associated with each layout at the top indicates the ordering of the elements within said layout.

To use the layouts provided on this site, simply select the appropriate sections of code provided in the grey boxes containing the XHTML, CSS, and Javascript associated with each layout, and then copy and paste into your favourite text-based editor.

If you do not have a text-based editor, I highly recommend Notepad ++. Notepad ++ works in a very similar fashion to Windows Notepad, except that it colour-codes the appropriate XHTML, CSS, and Javascript and thus makes it much easier to read and debug.

3-column liquid search engine optimized layout with header and footer. This is a hybrid of two of the most common CSS layouts available.
3-column liquid CSS layout with header.
3-column liquid XHTML layout with footer.
3-column liquid CSS layout.
2-column liquid CSS layout with right side menu, header, and footer. Requires a Javascript.
2-column liquid layout with left side menu, header, and footer. Requires a Javascript.
2-column liquid-width search engine friendly layout with right side menu and header.
2-column liquid layout with left side menu and header. A slightly more complex CSS layout, but one that is still easy enough for an XHTML newcomer.
This website is for sale!