Columns in CSS
In CSS 2, it is not possible to create equal height boxes. There are six possible solutions to use columns in HTML.
Use HTML tables
Use HTML tables to created
pro: it works
con: it is considered a HTML hack
Use CSS columns
pro: Perfect solution. Allows for automatic overflow of text between columns (unlike all other methods)
con: Hardly supported (it's not a standard yet, though the draft dates from 2001)
Use fixed height CSS boxes
Use fixes sized boxes to position each individual column
e.g. http://www.alistapart.com/articles/multicolumnlayouts and the sites it links to.
pro: produces clean CSS. Allows floats spanning multiple columns
con: you need to estimate the height of the text, and thus can't use a variable width
Use Background images
pro: Works in most browsers. Actual box does not extend (only the background image), so can't use all CSS
con: it is considered a hack.
Use CSS tables
pro: Just as good-looking as HTML tables
con: Does not work with Internet Explorer 7 or below. Considered a hack (it's still a table, though you do seperate content and layout). Can't reorder position of columns in CSS.
Use a container div for each column
pro: Very flexible; works in the nearly all situations without hacks
con: More complicated to set up and requires some non-semantic div tags
Use negative margin
pro: produces good visual results, with CSS only.
con: considered a CSS hack. Need additional hacks for IE, Safari, Netscape, Opera.
pro: produces clean CSS.