CSU Ram Head Logo

JTC 372

Web Design and Management

Alternative to Faux columns

Here is an alternative to the Faux Columns approach to equal-height columns. We have two columns inside a container called #content.

Content for id "#main" Goes Here

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.

Content for id "#side" Goes Here

Blah

Blah

Blah

 

The following rules will make the columns equally tall:

#content {

overflow: hidden;

}


#main-example {

float: left;
width: 67%;
padding-bottom: 32767px;
margin-bottom: -32767px;

}


#side-example {

float: left;
width: 33%;
padding-bottom: 32767px;
margin-bottom: -32767px;

}

Notes

  1. This seems to work on all modern browsers. I have not exhaustively tested old browsers, but I expect that it will break on some old version of IE.
  2. The advantage of this is that you don't need an image. It also works on three or more columns.