Two column layout position

Looks right until I add a border or background color

[humpg]

Looks good in both FireFox and IE. But I am a little confused as to what is happening.

Briefing:

Divs on page are as follows

Outerwrapper
___ Header
___ Navigation
___ Content Wrapper
______ Content
_________ Left Column
_________ Right Column
___ Footer

I set up my Left Column div with the following

<div style="width:398px; float:left; padding:10px 40px 0px 0px;"> ***content*** </div>

Right colum:

<div style="width:298px; padding:10px 0px 0px 0px;"> ***content *** </div>

And everything looks fine in IE and Firefox, but then I added a background color just to see that I was positioning everything correctly.

Looked fine in IE7

In firefox I see the Left coloum positioned in the top left corner 10px from the top which was correct, but I see the right column div positioned on top of the left column div 10px from the top (good) but all of the content that is in the right column is appearing to the right of the left column which is where I wanted it.

So if I turn off any background colors and borders I don't have any problems everything looks right. So can someone tell me why my content is in the right place but my container is off to the left in firefox?

[Marshall]

If you wrapper adds up to less than the combined width, padding, margins and border widths of the two <div>'s, the columns will shift. Remember that the actual width of a <div> is it's width plus padding plus margins plus borders.

Marshall

[humpg]

Here is what I have on my page:

<div id="contentWrapper">
<div id="content">

<div style="width:398px; float:left; padding:10px 40px 0px 0px;">
*** content ***
</div>

<div style="width:298px; padding:10px 0px 0px 0px;">
*** content ***
</div>

</div>
</div>

Here is the css for the content wrapper and outer wrapper:

#outerWrapper {
background-color: #4D4D4D;
border: solid 2px #F0E1C0;
margin: 0 auto 0 auto;
text-align: left;
width: 776px;
}

#outerWrapper #contentWrapper #content {
background-color: #009933;
color: #F0E1C0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 16px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
}

If I total the widths for left and right column they equal 756px.

I am not getting any wrapping of my columns the content shows up in the right spots. It's just when I add a border or back color to see where my divs are the right column div appears to the left but the content is on the right in the correct position.

It works but it is not perfect I guess until I can get the right column div to go around it's content.

Am I adding these widths up correctly?

[swa66]

A float pushes away content of items in the flow, but not borders and backgrounds. That's normal and expected.

As to doing all that math to set the width on that second div: why bother ?
Either let it flow and the content will expand to go under the float if it's longer. Or if you want to avoid that, use margin-left to push it together and let the float sit in the margin. Not having that math will make your life a lot easier.

Also make sure you fully understand the difference between the standard box model and the one implemented in IE. It sucks to have to deal with both, making "pixel perfect" positioning very difficult.