Dive with rollover and nested floats

[W92Baj]

Basically I am pulling data off of mysql and for each field I want a full width horizontal bar wich links off to more details of that item. The bar is styled and I want the border to change on rollover.
I have this working fine.

Now, within the bar I want 4 boxes each with some text in. 3 floating left and 1 right. Mainly for aesthetics.

HTML:


echo "<div class=holder>";
$query = "SELECT * FROM foo";
$result = mysql_query($query);

while ($row = mysql_fetch_array($result))
{
if ($row['Wcolour'] == "Red")
{
$class = "redbox";
}
else if ($row['Wcolour'] == "White")
{
$class = "whitebox";
}
else
{
$class= "box";
}
echo "<a class=$class href=".$_SERVER['PHP_SELF']."?id=".$row["id"].">
<div class=left><strong>".$row["Wtitle"]."</strong></div>
<div class=left>".$row["Wsubt"]."</div>
<div class=left>£".$fromprice."</div>
Edit/Delete
</a>";
}

Main CSS:


//set up boxes
a.redbox , a.whitebox , a.rosebox {
display:block;
float:left;
margin: 3px 0;
width: 530px;
height:22px;
line-height:18px;
color:#eeeedd;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:left;
cursor:pointer;
font-size:1.2em;
padding: 5px 5px 2px 5px;
background: #5913c5;
border: 2px solid #5913c5 ;
}
//override colours for other boxes
a.whitebox {
background: #eed;
border: 2px solid #eed ;
color: #333;
}
a.rosebox {
background: #bba3d5;
border: 2px solid #bba3d5 ;
color: #333;
}
//set border colours for hover
a:hover.redbox {
border: 2px solid #eed ;
}
a:hover .whitebox {
border: 2px solid #5913c5 ;
}
a:hover.rosebox {
border: 2px solid #eed ;
}

The problem I have is with the nested boxes (class left).
Class left CSS:

.left
{
width:auto;
float: left;
clear: none;
margin: 0 5px 0 0;
padding: 0 5px 0 0;
height:auto;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #333333;
background: #0f0; //added as an indicator it is working
}
No matter what I call it, (.left, a.redbox .left etc) I cannot get it recognised and I just get the text one below the other flowing out of the box.
I haven't even started to sort the right floating box yet.

I am no CSS guru so there are no doubt a few things wrong but can someone tell me how to sort it?

Ascii time!



_________________________________________________
| a.box (rollover) |
| _________ ________ _______ _________ |
||.left | |.left | |.left | |.right | |
|| | | | | | | | |
|| | | | | | | | |
| --------- --------- -------- ---------- |
| |
-------------------------------------------------


EDIT: Obviously I meant DIVS in the title not dive

[W92Baj]

I have chnaged the divs to spans but the problem persists.

[nobody]

class="left"

not class=left

[W92Baj]

Cant include " within a php 'echo' statement.
It works without throughout the rest of the site without them.