bg color on row divs - css

Question

I'm trying to learn how to put table content into css floats.
My approach has been to use a div at the "table" level, at the "row" level, and the "cell" level. Not sure this is a good strategy.
Anyway, when I set a background style at the "table" or "cell" level I can see the color change. When I set it at the row level it stays white.
Any guesses what's going on? Is there a better way to do this?
<h2>"Tables" work</h2>
<div style="width: 455px; background-color:#a4c4fc">
<div>
<div style="width: 70px; float: left">ID</div>
<div style="width: 220px; float: left">Lemons</div>
<div style="width: 50px; float: left">Horseradish</div>
</div>
<br clear: both>
<div>
<div style="width: 70px; float: left">1<LEFT></div>
<div style="width: 220px; float: left">3</div>
<div style="width: 50px; float: left">4</div>
</div>
</div>
<br>
<h2>"Row" divs do not seem to work</h2>
<div style="width: 455px">
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left">ID</div>
<div style="width: 220px; float: left">Lemons</div>
<div style="width: 50px; float: left">Horseradish</div>
</div>
<br clear: both>
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left">0</div>
<div style="width: 220px; float: left">0</div>
<div style="width: 50px; float: left">1</div>
</div>
</div>
<br>
<h2>Individual cell divs work</h2>
<div style="width: 455px">
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left; background-color:#a4c4fc">ID</div>
<div style="width: 220px; float: left; background-color:#a4c4fc">Lemons</div>
<div style="width: 50px; float: left; background-color:#a4c4fc">Horseradish</div>
</div>
<br clear: both>
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left; background-color:#a4c4fc">0</div>
<div style="width: 220px; float: left; background-color:#a4c4fc">0</div>
<div style="width: 50px; float: left; background-color:#a4c4fc">1</div>
</div>
</div>

Answer 1

This looks like tabular data.
If it is, you should use a HTML table element to display this information.
Too many people make the mistake of hearing "tables are bad", and try and do work arounds using div's, even when tables are most appropriate.
When people say you shouldn't use tables, they are referring to layout structure. It is still fine to use it in this case, they are not evil!
Then you'll be able to do:
<tr style="background-color:#a4c4fc;">
</tr>
If you are certain on using div's your issue is because the "cell" divs are all float:left;. Therefore your "row" div doesn't have a height.
You could add the following to the bottom of the "cell"'s to fix this:
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left">ID</div>
<div style="width: 220px; float: left">Lemons</div>
<div style="width: 50px; float: left">Horseradish</div>
<div style="clear:both;overflow:hidden;height:0;"></div>
</div>
Alternatively, use display:inline-block;
<div style="background-color:#a4c4fc">
<div style="width: 70px; display:inline-block;">ID</div>
<div style="width: 220px; display:inline-block;">Lemons</div>
<div style="width: 50px; display:inline-block;">Horseradish</div>
</div>
http://jsfiddle.net/hRCWk/2/
But don't do that, use a table :)

Answer 2

Clear your floats. Add overflow:hidden; to your row div.
Also, <br clear: both> makes no sense. Remove it or use <div style="clear:both;"></div>
Demo: http://jsfiddle.net/RX8Pq/

Answer 3

The row element isn't stretching because all the sub elements are floated:
http://www.quirksmode.org/css/clearing.html

Answer 4

Instead of floating you DIV elements you could set them to display as inline blocks...
display:inline-block;
then you dont need to clear the DIV floats afterwards.
Of course, you should just use a table anyway
NOTE: Apparently this will not work in IE8 and earlier versions.