Div-CSS Template - Help?

[Momotaro]

I'm in the process of refining my website template, which uses the <div> tag for different sections of the page, including a sidebar, and main part. I was wondering, does anyone have code to make those two match up in terms of height, without cutting of content, and not making them a fixed height? I've checked them on Firefox 3, IE 8, and Safari 4. They look mostly the same.

Code can be found at majhost.com/gallery/Ultimate-Collector/stuff/div-css_template.txt

Thanks!

[NatalieM]

I think you could do it if you use the same containing block for them both and then use height = "100%"..

For example, change your HTML to

<div id="the_maincontentandsidebarsection">
    <div id="the_maincontents">
        contents
    </div>
    <div id="thesidebar">
        sidebar
    </div>
</div>

And then for your CSS

div#the_maincontents, div#thesidebar {
height: 100%;
}

div#the_maincontents, div#thesidebar , div#the_maincontentandsidebarsection {
float: left;
}

div#the_maincontents, div#the_maincontentandsidebarsection {
clear: left;
}

I'm not 100% sure it would work but worth a try I reckon

[Momotaro]

It didn't work in Internet Explorer, but it did in Firefox and Safari. But, it extended all the way down! How can I get it to fit the content? Thanks anyway though.