Nested floats

[funkage]

Hello again.

So I've got this simple 2-column site. The column on the left is floated 'left'. Within the second column (which is on the right), I've got 4 layers of content stacked on top of one another. First layer floats left, middle stays in the middle, third and last one floats right.

But the last two 'floaters' float out of the second column. I tried to use a div layer to clear the floats, but it only makes it worse. I don't quite get it.

Is it anything to do with the 'uncleared' float property within the first column? Is there a solution to this?

Thanks in advance. :)

[GluteHam]

Can you show us/link us to your code?

[funkage]

<style type="text/css">
<!--

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
color: #666666;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}

#wrapper {
width: 100%;
padding: 0px;
margin: 0px;
}

#leftColumn {
padding: 20px;
margin: 0px;
width: 176px;
float: left;
}

#intro {
padding: 0px;
margin: 0px;
}

#logo {
margin: 0px;
padding: 20px 0px 0px 20px;
}

#contentColumn {
margin: 0px 0px 0px 212px;
padding: 20px;
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 48px;
color: #FFFFFF;
width: auto;
min-width: 800px;
}

#date {
float: right;
}

#quotation01 {
float: left;
margin: 0px;
padding: 0px;
}

#quotation02 {
margin: 0px;
padding: 0px;
clear: right;
float: right;
}

#content {
margin: 0px;
padding: 20px 0px 20px 0px;
}

.clearer {
clear: both;
}

//----------------------------------------------------------------------------------------------------------

Sorry.

So, #quotation01 should float left, #content in the middle, #date and #quotation02 float right — all these within #contentColumn.

Hope this helps.

[drhowarddrfine]

Showing the css without the html is like a day without sunshine. :)