2.5 Negative Bottom Margin

This is actually a pure CSS solution that works pretty well. Again the column divs are wrapped in a container div that thistime has overflow:hidden applied in the stylesheet. Then the column divs have large bottom padding and equally large negative bottom margins applied - values large enough to be larger than the longest column. The result is that the columns become as tall as the content within plus the large bottom padding, and then the negative bottom margin brings the document flow back to where the padding began, while the overflow: hidden on the containing div hides any overflow. The columns all appear to be the height of the containing div including any bacground colour or images applied to them.

For the ever popular 3 column layout with header and footer, the html is exactly the same as for faux columns, and the CSS would look something like this:

body		{text-align: center;}

#wrap		{margin: 0 auto;
		width: 900px;}

#header 	{width: 900px;
		height: 100px;}

#container	{display: inline;
		float: left;
		overflow: hidden;}

#content	{display: inline;
		float: left;
		width: 600px;
		margin-left: 150px;
		padding-bottom:: 10000px;
		margin-bottom: -10000px;}

#leftbox	{display: inline;
		float: left;
		width: 150px;
		margin-left: -900px;
		padding-bottom:: 10000px;
		margin-bottom: -10000px;}

#rightbox	{display: inline;
		float: left;
		width: 150px;
		padding-bottom:: 10000px;
		margin-bottom: -10000px;}

#footer 	{clear: both;}

There are a few problems to be noted with this solution:

  • There is a limit to the amount of padding that can be applied, which is in the order of 32767px. Exceeding this will result in the pages expanding to the bottom of the padding.
  • Printing from the screen produces difficulties, although this can be solved by suppressing the large padding and margin in a seperate print style sheet.
  • Linking to anchors within the containing div that is set to overflow:hidden causes the content of that column to shift upwards in IE and Firefox. This can be fixed in IE6 and below by omitting the overflow:hidden, but for IE7 there are 2 non-desired solutions: force IE7 into quircks mode or apply some complex expressions in the stylesheet to make the columns the height of the column container.

For pages that do use links and anchors, it is wiser to use the method described next (companion containers).