Css 3 column layout

[Albino]

ok, this has been bugging me for some time now.

I can make the layout fine. But when one column has more content in than others, they dont match the length/height, and the empty "gap" is filled with the background colour.

to see what I mean, please look at the attached file.

If anyone can help with this, it would be very much appreciated!

Todd

 

[w1ww]

Without the code its hard to help..

 

[Gaz]

PM me with your code, and all your images, as well as your main starting image (not sliced) please send as jpg's or png's no PSD's.

 

[Albino]

Without the code its hard to help..

It was more of a general question than a specific one, I guess I just figured that everyone had this problem when doing this layout.

All I really need is a way to keep the height of the columns relative to the others.

My site has 3 columns, but 2 are the same size, one is long (due to the layout)

I have attatched the zip file of the pages and images etc anyway, if you could have a gander, I would appreciate it!

 

[baxter]

I picked this snippet up somewhere don't remember where but its supposed to lengthen a three column div based on the longest of the three columns. Haven't tested but feel free to.

function setTall() {
	if (document.getElementById) {
		// the divs array contains references to each column's div element.  
		// Replace 'center' 'right' and 'left' with your own.  
		// Or remove the last one entirely if you've got 2 columns.  Or add another if you've got 4!
		var divs = new Array(document.getElementById('content'), document.getElementById('rc'), document.getElementById('lc'));
		
		// Let's determine the maximum height out of all columns specified
		var maxHeight = 0;
		for (var i = 0; i < divs.length; i++) {
			if (divs[i].offsetHeight > maxHeight) maxHeight = divs[i].offsetHeight;
		}
		
		// Let's set all columns to that maximum height
		for (var i = 0; i < divs.length; i++) {
			divs[i].style.height = maxHeight + 'px';

			// Now, if the browser's in standards-compliant mode, the height property
			// sets the height excluding padding, so we figure the padding out by subtracting the
			// old maxHeight from the new offsetHeight, and compensate!  So it works in Safari AND in IE 5.x
			if (divs[i].offsetHeight > maxHeight) {
				divs[i].style.height = (maxHeight - (divs[i].offsetHeight - maxHeight)) + 'px';
			}
		}
	}
}

 

[Albino]

cheers Baxter, I cant see to get it to work though haha.

Anyone else?