Equal Height for Two / Three Columns DIV Layout

Something that really stops tableless layouts is the lack of ability to make two or three columns the same height. There are a lot of tricks but the solution I prefer is with Javascript.

Description of the solution: I used the mootools framework since it provides lots of useful predefined methods, selectors etc.

Usage: Just include the latest mootools js file (don’t need ajax, json, fx and other) and the following js. Than add the class defined in the function (class=”equals” in the example) to the columns you want to be in equal height.

Example: Equal Height DIV Columns

Update: Also since Internet Explorer 6 adds silly spacing in DIVs add the following lines to your css:


WAI / XHTML Valid Input Fields Watermark

Have you ever wondered how people put text in their input fields and when you click on it, it disappears. This process is called input watermarking.

Bellow is the JavaScript I’m using on my sites. It is XHTML 1.0 transitional and WCAG priority 1,2 valid.

Usage: Just fill the array with the IDs and the values. Instead of IDs you can use names

Input Watermark Example page