Even flexible columns

HTML & CSS
1

Well, I have been going to school on faux columns and all the possible substitutes for them, but I 've got a bit of a sticky problem on this page: http://www.susansargent.com/inside.html. I have a javascript solution. The script looks for two columns by ID (left_column and right_column). The left sidebar is, of course, the left_column. I then have a right_column div that encloses the header, the top nav, the content area and the footer. For some reason I cannot even get the left sidebar to display without specifying the height which I think prevents the script from doing its magic. The script is supposed to take the column with the greater height and make the other column that height. I feel like I’m missing something really elementary.

By the by, what I want is the pattern in the left sidebar to change heights according to the content in the right column. Any suggestions would be welcome.

Thanks,

Luciano

2

Yep, thanks kevinius, my oversight. I’ve added it in now. :wink:

3

No javascript is needed for this. The key to faux columns is to put the background image on the container. So, what you need is something like this:


.containerinside {
	[COLOR="Red"]background: #ffe698 url(../images/sarghome_01.gif) repeat-y;[/COLOR]
	width: 960px;
	margin: 0 auto;
        overflow: hidden;
}

div#right_column {
	[COLOR="Red"]float: right;[/COLOR]
	width: 790px;
	background-color: #fff;
}

You don’t even need a left column/sidebar div if all you want is a background image down the side. With the image on the content div, it will naturally go right down the whole site, as the container will expand to hold its contents.

4

Also, put an overflow:hidden on the container that has a float in it. That way the container won’t collapse.

5

I want to thank you very much for this solution. Sometimes I run around looking for a an elaborate solution or a new technique and it’s really more about a way of thinking about the problem. This works perfectly and without the JavaScript. Thanks for the lesson and the fix.

All the best,

Luciano