How to get floated column to stretch to full height of container? - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

labiere · 06-29-2008, 02:42 AM

I have a site I have started building and i am using a 3 column layout. I am using 3 floated divs for my columns (hopefully I haven't made a mistake by making that decision). The left column is using a different background color from the other two. I have all three columns nested inside a container div with overflow set to auto to ensure the container expands to conain the floats. The problem I am having is figuring out how to have the 3 columns stretch to the same height as the tallest column. In some pages the left column will be tallest and in some the middle column will be. Since the containing div is not a fixed height, I can't use "height: 100%;" for my divs to get them to expand.

Is there a standard way of implementing this or have I gone wrong by using floating divs for my columns?

You can see the site's home page in progress here. Basically I want that red column to expand to the height of the middle column.

test.zeidelicious.com
username is "test" password is "test" to see the page.

Assuming that there is a general solution to this I don't think the code is needed, but here is the relevant CSS just in case:

Code:

body {
	min-width: 760px;
}

.wrapper {
	width: 760px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	overflow:auto;
}

.left_menu {
	width: 119px;
	padding: 0px 0px 0px 10px;
	margin: 0px;
	float:left;
}

.main_content {
	width: 380px;
	padding: 0px 25px 0px 25px;
	margin: 0px;
	float:left;
}

.right_column {
	width: 191px;
	padding: 0px 10px 0px 0px;
	margin: 0px;
	float:right;
}