Member Avatar for 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

Edited by sagive because: added some info
  • 2 Contributors
  • 2 Replies
  • 201 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by sagive

Dani AI

Generated

Nice fix — the symptom you hit is the classic case where floated children are taken out of the normal flow, so the parent looks like it has zero height. ’s empty clearing element works (and confirmed it), but it adds presentational markup on every page. Better approaches keep templates cleaner and handle every dynamic WordPress page automatically.

A robust, minimal solution is the CSS clearfix. Put this in your stylesheet and add the class to the container that should wrap the floats:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Use it like #main with a clearfix class so you don’t need empty markup.

If you prefer not to add a class, here are alternative options:

/* creates a new block formatting context and contains floats */
#main { overflow: auto; }

/* modern, semantic option when you can target current browsers */
#main { display: flow-root; }

/* ditch floats and get flexible layouts + equal-height columns */
#main { display: flex; gap: 20px; align-items: flex-start; }
#sidebar { width: 280px; }
#pagecontent { flex: 1; }

Notes and tips:

  • overflow: hidden can clip shadows or dropdowns; overflow: auto is safer but may show scrollbars if something truly overflows.
  • display: flow-root is the cleanest containment when supported by your browser targets.
  • For very old IE compatibility you can use the zoom: 1; hasLayout trick on the parent (nonstandard but harmless for legacy support).
  • Put these rules in your theme stylesheet (not inline), test pages with the longest possible content, and inspect with DevTools if the background still doesn’t extend — absolute positioning or floated children inside other containers can also cause surprises.

Recommended Answers

All 2 Replies

Member Avatar for Member #825775

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>
Edited by Member #825775 because: n/a
commented: Thanks a lot :) +2
Member Avatar for sagive

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.