Trouble with floating div in IE7

Having trouble with getting floating div to work

[Clara]

Hey,
This is my first post so please tell me if I'm doing something wrong.
I'm trying to create a website that has a container div, side bar div and content div all enclosed in my header div (so that the header image can be set as a background to all the divs.)
The sidebar div is floating to the right. The container div is there just to push down the content div. The result is that I have my header image top, content below the header and the sidebar to the right of both.
This displays exactly as intended in Firefox 3.0.1, Opera 9.2 and Safari 3.1.1. However, in IE7 there is a huge gap between the header image and the content. (I have not tested any other browsers.) It also appeared to the right of where it should have been. To help solve the problem, I gave all of my divs a coloured border.
From this, I determined that in IE7 the container div was being pushed below the floating sidebar and centered in the header div. From my understanding, having a floating element takes it out of the "flow" of the CSS and everything else falls into place like it would without the floating element (aside from being pushed a little to the side.) But in IE7, this appears not to be happening.

Here is the relevant coding:

<div id="header">
<div id="sidebar">
Sidebar content
</div>
<div id="container">
</div>
<div id="content">
Main content.
</div>
</div>

And the relevant CSS:

#header
{
background: url('url') no-repeat scroll top left;
width:700px;
margin: 0;
padding: 0;
border: 1px solid red;
}

#content
{width: 500px;
border: 1px solid yellow;
margin: 0 0 0 25px;
}

#container {
width:525px;
height: 375px;
margin:0 0 0 0;
border: 1px solid green;
}

#sidebar {
float: right;
width: 150px;
text-align: left;
margin: 3px 0px 3px 30px;
padding: 6px 0px 10px 0px;
border: 1px solid blue;
}

I am very, very new to CSS and HTML, so the answer will probably be quite obvious to anyone who knows more than I do. I've tried searching for an answer on google and briefly scanned these forums, but I haven't found anything that helps me. I don't want to blame my incompetence on a browser, but so far, it seems as if this is a bug in IE.

Any help at all would be greatly appreciated. Thanks in advance.

[Marshall]

Hello Clara. Welcome to WebmasterWorld.

Just a quick response that may be part of the problem. The actual width of an element is its width + margins + padding, the latter being one most do not realize. It is probable that your elements actually add up wider than the space allotted.

The other variable are the default margin and padding settings of browsers when you do not specify them. This variable can be anywhere from 5px - 10px, so the past thing to do is zero out these settings then assign your own. I suggest adding, for starters:

body {
margin: 0;
padding: 0;
}

to your CSS.

Marshall

[edited by: Marshall at 4:19 am (utc) on Aug. 19, 2008]

[Clara]

Thanks for the reply!
My body margin and padding were already set to 0, so I tried setting all the other padding to 0. That didn't change it, but you were right when you said that my elements were adding up to more than the give space. So I increased the width of my header, and the worked perfectly. So thank you for your help! It's very appreciated.
Out of curiosity, though, why would this be a problem in IE and not FF, Safari or Opera? I would think it should happen in all of them.

[csuguy]

Marshall is absolutely correct. I took your code and I commented out the margin and padding for the sidebar - and it suddenly worked for both FF and IE6 (which it wasn't b4).

There has to be horizontal room for any objects next to floated divs or they are going to be forced down onto the next line.

Ryan

[csuguy]

As for why it would appear different in IE - they use a different Box Model. You can look it up online for details.