float;left/right; causes a div not to expand?

[wsg14]

http://img412.imageshack.us/img412/3585/notexpandyb9.png
http://img412.imageshack.us/img412/3585/notexpandyb9.png

HTML:

<!-- CONTENT START -->
<div class="content">

<div class="top"></div>
<div class="middle"><h2>update <b>everything</b>, from one place</h2>

<div class="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nisi sem, hendrerit a, facilisis id, ornare quis, quam. Integer varius sollicitudin purus. Donec sit amet eros. Sed neque quam, egestas sit amet, commodo at, dapibus at, metus. Praesent gravida velit non augue. Nulla facilisi. Aliquam bibendum, sem ut dictum elementum, nisl diam malesuada diam, quis interdum orci urna a mi. Integer cursus sagittis est. Nunc sed ligula eget libero bibendum commodo. Curabitur nisl risus, euismod ut, varius non, egestas quis, urna. Suspendisse potenti. Nunc mauris lectus, iaculis ut, blandit id, adipiscing non, dolor. Nulla porttitor turpis quis arcu. Nullam eu ipsum. Quisque pretium tristique lacus. Donec tristique dolor.
</div>

<div class="splitter"></div>

<div class="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nisi sem, hendrerit a, facilisis id, ornare quis, quam. Integer varius sollicitudin purus. Donec sit amet eros. Sed neque quam, egestas sit amet, commodo at, dapibus at, metus. Praesent gravida velit non augue. Nulla facilisi. Aliquam bibendum, sem ut dictum elementum, nisl diam malesuada diam, quis interdum orci urna a mi. Integer cursus sagittis est. Nunc sed ligula eget libero bibendum commodo. Curabitur nisl risus, euismod ut, varius non, egestas quis, urna. Suspendisse potenti. Nunc mauris lectus, iaculis ut, blandit id, adipiscing non, dolor. Nulla porttitor turpis quis arcu. Nullam eu ipsum. Quisque pretium tristique lacus. Donec tristique dolor.
</div>

</div>
<div class="bottom"></div>

</div>
<!-- CONTENT CLOSE -->

CSS:

.content {
width: 663px;
margin: 0 auto;
clear: both;
padding-top: 30px;
}

.content .top {
background-image: url(http://www.x.com/images/content/top.png);
width: 663px;
height: 19px;
}

.content .middle {
width: 643px;
padding-left: 10px;
padding-right: 10px;
background-color: #ffffff;
}

.content .bottom {
background-image: url(http://www.x.com/images/content/bottom.png);
width: 663px;
height: 20px;
}

.content .middle .left {
width: 350px;
float: left;
}

.content .middle .splitter {
background-image: url(http://www.x.com/images/misc/splitter.png);
width: 10px;
height: 319px;
margin: 5px;
float: left;
}

.content .middle .right {
width: 273px;
float: right;
}

As you can see in the image the white content box (the div "middle") is not expanding. I've messed around and when I remove the floats from the "left" and "right" divs, "middle" expands. Anybody know why? +rep

[Source]

Its because every other class has to have a perspective float on it, unless its a wrapper keeping things in the middle. (thats a general rule, don't flame me for saying that I know its not absolutely correct... but for layout holders floats are always a great thing to use.

[wsg14]

Its because every other class has to have a perspective float on it, unless its a wrapper keeping things in the middle. (thats a general rule, don't flame me for saying that I know its not absolutely correct... but for layout holders floats are always a great thing to use.

I'm sorry but I don't understand what you're trying to say.

[Source]

<!-- CONTENT START -->
<div class="content">

<div class="top"></div>
<div class="middle"><h2>update <b>everything</b>, from one place</h2>

<div class="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nisi sem, hendrerit a, facilisis id, ornare quis, quam. Integer varius sollicitudin purus. Donec sit amet eros. Sed neque quam, egestas sit amet, commodo at, dapibus at, metus. Praesent gravida velit non augue. Nulla facilisi. Aliquam bibendum, sem ut dictum elementum, nisl diam malesuada diam, quis interdum orci urna a mi. Integer cursus sagittis est. Nunc sed ligula eget libero bibendum commodo. Curabitur nisl risus, euismod ut, varius non, egestas quis, urna. Suspendisse potenti. Nunc mauris lectus, iaculis ut, blandit id, adipiscing non, dolor. Nulla porttitor turpis quis arcu. Nullam eu ipsum. Quisque pretium tristique lacus. Donec tristique dolor.
</div>

<div class="splitter"></div>

<div class="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nisi sem, hendrerit a, facilisis id, ornare quis, quam. Integer varius sollicitudin purus. Donec sit amet eros. Sed neque quam, egestas sit amet, commodo at, dapibus at, metus. Praesent gravida velit non augue. Nulla facilisi. Aliquam bibendum, sem ut dictum elementum, nisl diam malesuada diam, quis interdum orci urna a mi. Integer cursus sagittis est. Nunc sed ligula eget libero bibendum commodo. Curabitur nisl risus, euismod ut, varius non, egestas quis, urna. Suspendisse potenti. Nunc mauris lectus, iaculis ut, blandit id, adipiscing non, dolor. Nulla porttitor turpis quis arcu. Nullam eu ipsum. Quisque pretium tristique lacus. Donec tristique dolor.
</div>

</div>
<div class="bottom"></div>

</div>
<!-- CONTENT CLOSE -->

CSS:



.content {
width: 663px;
margin: 0 auto;
clear: both;
padding-top: 30px;
}

.content .top {
background-image: url(http://www.x.com/images/content/top.png);
width: 663px;
height: 19px;
float: left;
}

.content .middle {
width: 643px;
padding-left: 10px;
padding-right: 10px;
background-color: #ffffff;
float: left;
}

.content .bottom {
background-image: url(http://www.x.com/images/content/bottom.png);
width: 663px;
height: 20px;
float: left;
}

.content .middle .left {
width: 350px;
float: left;
}

.content .middle .splitter {
background-image: url(http://www.x.com/images/misc/splitter.png);
width: 10px;
height: 319px;
margin: 5px;
float: left;
}

.content .middle .right {
width: 273px;
float: right;
}

[wsg14]

Oh, now I see. Thanks Matt, you're a god at CSS. :)
I have to spread before I can give you rep (learned that from last thread).

[Source]

Note how if I was really doing what I should of done I would of switched to ID's for single usage etc... Maybe you should read up on some CSS tutorials to let you know about using p, span etc for thing rather than div's with applied styles.

[wsg14]

Alright, thanks.