Two-column equal height fluid layout

The Lab, Tutorials, (X)HTML & CSS / Saturday June 28th, 2008 / 1 comment

One of the most common layouts I find people asking for are two or three column layouts that expand to fit the browser's width and have both columns the same height always. I have seen several solutions to this, but none of them were able to incorporate images as the borders and backgrounds for the layout. So, I decided to attempt to make one.

Before I explain, you can see the final product in the lab at http://lab.aspektas.com/rdtech/. Neat, isn't it?

I also made it so that no image tags were used, which is why there appear to be a lot of division elements.

I won't attempt to walk through the entire structure, as I did start to do that and found I'd never finish. So I'll just highlight some of the features that make it work.

In the markup, you will see quite a few elements that look like this:

<div id="header">
<div id="header-left">
<div id="header-right"></div>
</div>
</div>

These are in order to create a section with three images that represent the left, middle, and right of a graphic (in this case the header), and still have it fluid-width. If you look at the CSS below you can see why:

div#header {
background:url(images/banner_middle.png) repeat-x left top;
}
div#header, div#header div {
height:164px;
}
div#header-left {
background:url(images/banner_left.png) no-repeat left top;
}
div#header-right {
background:url(images/banner_right.png) no-repeat right top;
}

Basically the parent division has a repeating background, then the child has the background positioned to the left with no-repeat, and the child of that has the background positioned to the right with no-repeat.

The most complicated part of this layout was probably getting the two columns, one fluid and one fixed-width, to stay the same height, no matter which one was taller.

The solution was to have three nested divisions, each with their own backgrounds. The first division has the background of the fixed-width column, the second one has the background of the left of the fluid column, with the innermost having the background of the right of the fluid column. Therefore, with the fixed-width column floated and the fuild one with a margin to stop it from overlapping the former, and a cleared division underneath, the longer one would stretch the outer divisions (the ones with the backgrounds) down, causing both columns to appear to be the same length. Lets look at the code.

HTML:

<div id="container">
	<div id="body">
		<div id="body-right">
			<div id="menu">
				<!-- fixed-width -->
			</div>
			<div id="content">
				
			</div>
			<div id="clear"></div>
		</div>
	</div>
</div>

CSS:

div#container {
	margin:20px;
	background:url(images/menubar_middle.png) repeat-y left top;
}
div#body {
	margin-top:-16px; /* bugfix, don't ask */
	margin-left:185px;
	background:#FFFFFF url(images/body_midleft.png) repeat-y left top;
}
div#body-right {
	background:url(images/body_midright.png) repeat-y right top;
}
div#menu {
	display:inline;
	float:left;
	width:174px;
	position:relative;
	margin-left:-185px;
	margin-top:-4px;
}
div#content {
	padding:0px 15px;
}
div#clear {
	clear:both;
	height:1px;
}

There you can see the various background images and positionings. The tops and bottoms of the two columns were added in the manner explained in the previous part of this post.

I understand that this is not perhaps the most complete explaination of the layout, but its all I have time for at the moment. I hope you understand how it works and can use it in your own designs.

If you have any questions you can of coure leave a comment and I'll attempt to respond to your query.