3 Divs nested in wrapper, working in IE not in FF Options

[tableguy]

I have been doing webpages with simple html for years. This past week I decided to take a site and convert it into xhtml and take all my tables and turn them into divs etc.

The last couple of hours Ive been kicking myself in the nuts trying to figure this out - it looks find in IE, but in FF and others the right hand div drops down.

Here is what I am wanting > 3 Divs nested in a Div Wrapper equally spaced in a fixed width ...

Here is the CSS for the divs ...

CODE

#contentWrapper {
       position: relative;
    overflow: hidden;
       width: 640px;
    margin: 9px 0px 0px 0px;
    padding: 0px;
}

#contentLeft {
    float: left;
       width: 200px;
    margin-left: 0px;
    margin-right: 20px;    
       background-color: #F8F5EC;
    border: solid #57431D 1px;    
    padding: 0px;    
}

#contentCenter {
    float:left;
       width: 200px;
    margin-left:0px;
    margin-right: 20px;    
       background-color: #F8F5EC;
    border: solid #57431D 1px;    
    padding: 0px;        
}

#contentRight {
    float: right;    
       width: 200px;
    margin-left:0px;
    margin-right: 0px;    
       background-color: #F8F5EC;
    border: solid #57431D 1px;
    padding: 0px;    
    clear: both;
}

and here are my divs ...

CODE

<div id="contentWrapper">
    <div id="contentLeft">
      <p>div 1 div 1 div 1</p>
    </div>
    <div id="contentCenter">
      <p>div 2 div 2 div 2</p>                
    </div>    
    <div id="contentRight">
      <p>div 3 div 3 div 3</p>
    </div>
</div>    

I also was trying to add a div header on top of each nested divs for a header tag and a different color/border configuration; but that really got things complicated. After years of working with HTML I had finally gotten to a place where I could design a page that looked pretty close in all browsers - now I feel like I am back to day 1 trying to do the same thing again.

If anyone can give me guidance I would greatly appreciate it.

[pandy]

Two reasons...

CODE

#contentRight {
   ...
   clear: both;
}

This is what clear does. "This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box." So it drops...
http://www.w3.org/TR/CSS2/visuren.html#flow-control
This is much the same behavior as with <br clear="...">, but with CSS you can eliminate the BR.
http://htmlhelp.com/reference/html40/special/br.html

When you remove the clear you won't notice any difference. That's because your math is wrong. 200*3+20*2+1*6=246, not 240. So the too narrow container forces the last float to drop. You really made sure, didn't you?

[pandy]

Forgot to say, I wasn't aware that IE messed this up and I have no idea why. I only have IE6. Could you tell me what version(s) of IE you have tried and it works this way in?

[tableguy]

IE 7 ...

I forgot the width of the borders huh? DARN - its always something so simple that so easily missed. I'll give it another shot and see what happens.

Thanks for the comments.