Columns in CSS

From Exterior Memory
Jump to: navigation, search

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

http://www.w3.org/TR/css3-multicol

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

http://www.alistapart.com/articles/fauxcolumns/

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

http://moronicbajebus.com/playground/cssplay/equalcolumn/files/

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

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

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

http://positioniseverything.net/articles/onetruelayout/equalheight and http://www.redmelon.net/tstme/3cols2/

pro: produces good visual results, with CSS only.
con: considered a CSS hack. Need additional hacks for IE, Safari, Netscape, Opera.

Use Javascript to resize CSS boxes

http://www.paulbellows.com/getsmart/balance_columns/ and http://www.projectseven.com/tutorials/css/pvii_columns/

pro: produces clean CSS.
con: relies on Javascript and proper implemented DOM. Debugging is harder.