Dynamic column Height without tables

[rrsub]

This seemed like an easy problem to solve but it has exhausted me today.

I see lots of 2 column WIDTH problems solved but not 2 column HEIGHT problems and I'm at my wits end tonight.

Basically, I'm building a template. 1 way to fix this is to use a 2 cell table but I don't want to do that.
I have 2 columns, left side nav and body content.
If the left side nav is more than the content, I want the content background to be even with the left side and vice-versa.

I created a background image for the parent DIV then 2 nested DIVs, left side floats.

#container {
	margin: 0 auto;
	width: 800px;
}
#bottom {
	background: url(img/bkd.jpg) repeat-y;
}
#leftside {
	float: left;
	width: 180px;
}	
#content {
	width: 610px;
}

<div id="container">
	<div id="bottom">
       <div id="leftside">
	
	Lorem ipsum dolor sit amet,
	
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et lacus. Vestibulum dui. Etiam lacinia nisl. In laoreet lectus a lorem. Mauris gravida. Pellentesque venenatis malesuada orci. Maecenas quam. Sed nonummy accumsan lorem. Aenean est odio, dignissim mollis, tempor quis, accumsan eget, erat. Vestibulum consequat, massa condimentum tempus auctor, risus metus aliquet magna, non rhoncus orci est nec nisl. Aliquam id nunc.
	
		
	</div>
	</div>



</div>

I've cleaned up my code for what didn't work and this is where I start every time.

Is there a way or am I stuck with tables?

For some reason, I was under the impression that this was a common problem but after all the articles, It's the width where people resize their browser that has the answers.

 

[Vragabond]

Faux Columns describes exactly what you want and how to do it.

 

[rrsub]

OK, That wasn't that hard after I slept on it.
Thanks Vragabond for the inspiration.

Faux Columns didn't -exactly- tell me what I wanted to know but it did help me to troubleshoot it differently.

Basically:

- setup the background image to represent the colors you want to use
- float left (that's what got me) BOTH containers for left and right content
- add a clearing break before the end div to push down the image

#container {
    margin: 0 auto;
    width: 800px;
}
#bottom {
    background: url(img/bkd.jpg) repeat-y;
}
#leftside {
    float: left;
    width: 180px;
}    
#content {
    width: 620px;
    float: left
}

<div id="container">
    <div id="bottom">
       <div id="leftside">
    
    Lorem ipsum dolor sit amet,
    
    </div>
    <div id="content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et lacus. Vestibulum dui. Etiam lacinia nisl. In laoreet lectus a lorem. Mauris gravida. Pellentesque venenatis malesuada orci. Maecenas quam. Sed nonummy accumsan lorem. Aenean est odio, dignissim mollis, tempor quis, accumsan eget, erat. Vestibulum consequat, massa condimentum tempus auctor, risus metus aliquet magna, non rhoncus orci est nec nisl. Aliquam id nunc.
    
        
    </div>
    </div>


    <br style="clear: both;"/>
</div>

 

[Vragabond]

Hi, apparently you can achieve the same result as with the clearing element if you insert overflow: auto; on the container. It makes for a semantically more correct code and also much easier to understand:

#bottom {
    background: url(img/bkd.jpg) repeat-y;
    overflow: auto;
}

 

[rrsub]

overflow: auto; doesn't work in IE or Opera.