SitePoint.com

The X Library is licensed LGPL.

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

20Apr05: Renamed files so that "layout2" is the 2 column demo, and "layout3" is the 3 column demo. Thanks to Peter for pointing out how confusing it was! :-)

29Mar05: This page now uses a library file created by XC - instead of using x_core.js and x_event.js. The X library Javascript for this page went from 14990 bytes to 5482 bytes!

What Is This?

This is a two column version of the three column demo.

This demo started life with Kevin Yank's SitePoint Article. Kevin does an excellent job of explaining the design and implementation of this page. I modified Kevin's demo and now provide it here at Cross-Browser.com. The following are some of the features of this demo.

• It uses CSS for the basic 2-column layout, then uses the X library to equalize column heights onLoad and onResize.
• It is downgradeable. Disable Javascript in your browser and refresh this page to see the downgrade layout. The page will also downgrade in the absence of required Javascript objects.
• All Javascript, CSS, and HTML are separated into their own files.
• It uses valid HTML and CSS - in the spirit of XHTML ;-).

Implementation Tips

Most of the problems people have when trying to use this demo is that they don't read Kevin's article or don't follow his instructions.

It is important to remember that the column containers must contain statically positioned content containers.

Always develop a page in this order: (1) HTML for basic structure; (2) CSS for styling and layout; (3) Javascript for enhancements. Get the page working well at each step before proceeding to the next step.

If you have problems, post your questions at the SitePoint Javascript Forum.

Files

• layout2.html - this file
• layout2.css - styles
• layout2.js - application script
• layout2or3_xlib.js - custom X library for this page made by XC
• layout2or3_xlib.txt - corresponding X documentation file made by XC

More

Discuss this and other DHTML topics at the SitePoint Javascript Forum.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.