problem with DIVs and floats

[mattinator]

I know there has to be a simple solution to this, but I'm a little new to the complete-CSS formatting technique, havng just switched from using tables...

I have a container DIV outside of two smaller DIVs, like this:

<div id="content">
<div id="mainContent">
here's where the main content goes...
</div>
<div id="sideBar">
sidebar content
</div>
</div>

And the CSS formatting for this goes as follows (the colors having been changed for this question):

#content {
padding: 10px;
margin: 0;
background: #000000;
}
#mainContent {
float: left;
background: #FF00FF;
width: 500px;
padding: 10px;
}
#sideBar {
float: right;
background: #00FF00;
padding: 10px;
width: 180px;
}

The outside container DIV does not surround the two inner DIVs with its background completely. Why is this, and how can I fix this?

I appreciate any advice you could give.

[createErrorMsg]

Why is this

Your background does not "surround" your two divs because both of the divs are floated. When an element is floated a number of things happen: first, that element is removed from the document flow, then it is mooved in it's float direction until it hits either the container edge or the edge of another float. The important thing here is that the float is removed from the flow. This means that, except for in very limited ways, other elements cannot interact with the floated element, including it's container. Since they cannot interact, the floated element has no effect on the container's height. So the height of a container is controlled only by the height of it's non-floated children. Since both of your div are floated, there is nothing in the div to push down it's height. Therefor, thinking itself empty, the container div snaps shut, taking the background with it.

You may notice that in IE everything looks just as you expected. This is because IE has an auto-enclosing behavior. It will always allow a floated element to effect the height of it's container, even if you don't want it to.

how can I fix this?

In this case, you WANT the container's height to be effected by the floats. There are a number of ways to get compliant browsers to do this.

The first, and easiest, IMO, is to float the container, itself. by applying a float property to the container, you force it to expand and contain it's children.

If, for some reason, you cannot float the container without making the rest of the layout go south, you can add a clearing element to the bottom of the container, AFTER the two floats but before the container's closing tag. Most people use a <br /> or an <hr /> styled to 0 height. Either way,, give it a clear:both and it will help prop open the container so the background shows through.

cEM

PS: Welcome to WebmasterWorld!

[mattinator]

Thank you SO much for your help. The float element added to the container worked and it looks great!

I was about to use absolute positioning for the side bar and get rid of the floats, but I decided that might get messy in the long run.

Thanks again!
-Mattinator

[mattinator]

Eep! Whoah. It works like a dream in FF, but in IE...

IE sends the sideBar DIV below the mainContent DIV. Is there some workaround for this (EDIT: without having to change the HTML coding)?

[createErrorMsg]

First, make sure that you're using a full and valid doctype [w3.org] on your page. If you are not using one now, adding that may be all that is needed to get IE into line.

Next, try specifying a width for the container, which it should have anyway if it's being floated. You want to make sure it is wide enough to hold all of the elements, plus their padding, margins and borders. Calculated on the code you posted above, I would try 720px. If that doesn't work, try 725px. Note that this assumes a valid doctype, which causes IE6/Win to function in standards mode and use the same box model as FF. For lower versions of IE, you will have to hack or workaround the box model to get this layout displaying the same.

cEM

[mattinator]

I didn't put the width in! D'oh! I feel like such an idiot-- it's so simple now why it didn't work.

Thank you very much, it works on both IE and FF now!

-Mattinator