Paul, thanks for the response.
A few things...
1.) I think I have a pretty good grasp of Floats when you have a page of Text and something like a Floated Image. (My SitePoint book did a good job of describing that.)
And your comments are a good re-inforcer.
However, maybe I don't have as good of a grasp how Floats work around Other Floats and Other Text in more complex layout?! :-/
2.) Where I'm a little confused about your comments above, because I think the code in my original post was trickier than what you just described.
Here is my markup again...
<img id='onlineStatus' src='/images/Light_Green_10.png' width='10' alt='Member Online' /><br />
<img class='noborder' src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='100'
title='Picture: Debbie sitting outside in the garden.' />
<span class='commentDate'>Posted on: 2012-02-28 11:00pm</span>
<p>Update: Sorry to bother with this, I found the answer with a little minor digging. But, if anyone else was wondering the same, I think I'll explain.
The <textarea> tag is different than the <input> tag in that where you would normally put data to display in an <input> field under the 'value' attribute, the <textarea> tag stores the same information not in a 'value' attribute, but in between the opening and closing tags: eg. <textarea> value info goes here </textarea>.
Hope that helps someone, sometime...</p>
<img src='/images/Flag_Red_20x22.png' width='15' alt='Flag Comment' />
In that code...
On the outside, .commentWrapper is a Float
Inside .commentWrapper, .commentBody is also a Float
Inside .commentBody, .userInfo is a Float
Inside .commentBody, .userPost is not a Float
Inside .commentWrapper, .commentFooter is not a Float
I understand that regular code ignores the Floats, but why did the background color of .commentFooter take over the background of .userInfo - which is a Float - when .userPost comes before it, and is not a Float?!
Following the logic I thought you described, the background color of .userPost should have pushed to the left underneath .userInfo and become the visible background color instead of .commentFooter doing that.
3.) Related to #2, what purpose does this code serve...
margin: 0 0 0 160px;
padding: 10px 20px 20px 20px;
/* ADDED: 2012-06-13 */
content: " ";
When I comment that second block out, I don't see any change in FireBug.
But if I remove this code...
margin: 0 0px;
...then the absence of the clear: both in .commentFooter makes the Footer background fill in behind .userInfo.
Hope I'm not confusing the heck out of you?!
4.) I'm not sure why I chose to make .commentWrapper, .commentBody, and .userInfo Floats, but I did.
What would make the most sense?
FWIW, all of the Article Comments are conatined inside of #boxComments which has a max-width: 640px; which mirrors what the Article has above it for styles.
I guess I wanted .commentWrapper to have a Minimum Width - which is does - but it can grow, since I wanted a Min-Max Fluid Design.
.userInfo should be a Fixed Width.
.userPost should be Fluid.
Hope I haven't confused things too much?!