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

Recommended Answers

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: …
Jump to Post

All 2 Replies

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>
commented: Thanks a lot :) +2

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.