Div's Float and the content..

[sagive]

Hey guys..

i got this kind of div structure
(Hebrew website)

<div id="main" style="background: #ffffff; padding: 20px;">

 <div id="sidebar" style="float: right;">
 actuall sidebar
 </div>

 <div id="pagecontent" style="float: right">
 some content
 </div>

</div>

My problem..

The contact inside the content / sidebar isn't stretching the "main" div and so.. i got no background for the other div's when the content is long..

This is a Wordpress based website so the content of each page is different
on each page.. also.. i dont want to use table.. <-- old system?

Got any idea's??
what am i missing?

i need to make the "main div" auto height that also works in IE
But leave those div's float side by side..

Your help would be appreciated

[SamJacob]

Put this after #pagecontent

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

Here's a good article talking about floats, http://www.alistapart.com/articles/css-floats-101/

So your code should look like this:

<div id="main" style="background: #ffffff; padding: 20px;">
     
    <div id="sidebar" style="float: right;">
    actual sidebar</div>
     
    <div id="pagecontent" style="float: right">
    some content</div>

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

[sagive]

Thanks a lot man.. i can't belive i haven't tried this :)