3 column divs stretch together... how do i do that?

Get Started
1

hey guys, i’m oji. this is my first time dabbling in css.

i have a website with a css file as follows:


html,body{
	height: 100%;}

body{
	background: #e2e2e2 url(images/bodybg.png) repeat-x;
	font: 12 arial,verdana;
	margin: 0;
	padding: 0;}

#body-wrapper{
	background: #4a4a4a;
	width: 100%;
	margin: 0;}
	#r-column{
		width: 152px;}
	#c-column{
		margin: 0 auto;
		width: 625px;}
	#l-column{;}

i want a 3-column layout where if c-column stretches (and as a result body-wrapper also stretches) then r-column and l-column stretch as well.

i tried a 3-column layout using floated divs but issues arose where the background/borders wouldn’t stretch to accommodate content greater than 100% (which i had set).

also, when i floated the column divs their height didn’t seem to affect the length of body-wrapper.

any solutions?

2

Can’t do that with css.

Most people use the faux column technique to make it SEEM as if the other columns are also getting longer. The trick is to put all columns inside a container/wrapper div and have an image as the background for that containing div, with that image repeating vertically. The image’s colours match that of the divs, and when ever one column is longer than the others, you see the colours from the background image as it the other columns were also bigger.

Here’s the original reference to this technique

Re the outer wrapper div not stretching - set overflow:hidden for that div.

3

If you’re happy to use javascript to set the 3 column heights to the height of the tallest column, it’s quite easily done.

4

I would only advise javascript if this really couldn’t be done in CSS at all. But It is possible in pure CSS. In fact there are a few options available. I always used the One True Layout (Large bottom padding and equal negative bottom margin), but Paul O’B and Rayzur made me aware of some [URL=“http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems”]mayor issues that this method has. Since that time I’m using [URL=“http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm”]Paul O’B’s method where absolute columns are positioned under the floating columns.

I hope this will help you. It did for me.