Help with <div> - FF versus IE

[redsox9]

I consider myself fairly experienced in web design but I'm having the greatest frustration with the <div> tag. For example, let us say that I have the following code:



<div id="main">

<div class="one">
<p>Content goes here</p>
</div>

<div class="two">
<p>Content goes here</p>
</div>

<div class="three">
<p>Content goes here</p>
</div>

</div>


Now, in my CCS stylesheet, I have the following:



div#main {
width: 80%;
margin: 0 auto;
padding: 0;
clear: both;
}

div.one {
float: left;
width: 30%;
padding: 0;
margin: 0;
}

div.two {
float: left;
width: 30%;
padding: 0;
margin: 0;
}

div.three {
float: left;
width: 30%;
padding: 0;
margin: 0;
}


Now, what I cannot seem to do is get the <div> boxes to auto-adjust so that one, two, and three all have equal height in FF; right now, it defaults to what will contain the <div> content. However, in IE, the three <div> boxes do auto-adjust to equal one another regardless of how little or how much content there is. This becomes more apparent when you set the background of the body to be a darker color and the <div> boxes to be another.

Am I making sense here? I'm certain that there is a method that works regardless of your browser preference but I'm having no luck searching the web on this topic. Any help would be appreciated.

[dug]

Not sure if I am missing the point here, but I would expect those divs to all size themselves independently as they are all distinct containers. If say, you wanted div2 and 3 to resize according to the amount of content in div1, you would have to nest dev 1 inside 2 and 3.

[stenrap]

I'm seeing identical behavior in both FF 2 and IE 6: each <div> is sized according to its own content--not the size of an adjacent <div>. Of course, if I explicitly set the height in the CSS, then each <div> is the same size as its neighbor.

[felgall]

The only difference between the two is that in IE the #main div has a zero height because all of its content is floated and you haven't included any of the patches in the CSS to fix that IE6 bug. Adding overflow:hidden is often the easiest.