Even flexible columns

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.



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

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.

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

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,