Dive with rollover and nested floats

programming web dev
1

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.
[COLOR=red]I have this working fine.[/COLOR]

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 "[COLOR=red]<a class=$class href=".$_SERVER['PHP_SELF']."?id=".$row["id"].">[/COLOR]
[COLOR=red] <div class=left><strong>".$row["Wtitle"]."</strong></div>[/COLOR]
[COLOR=red] <div class=left>".$row["Wsubt"]."</div>[/COLOR]
[COLOR=red] <div class=left>£".$fromprice."</div>[/COLOR]
[COLOR=red] Edit/Delete[/COLOR]
[COLOR=red]</a>[/COLOR]";
    }

Main CSS:


[COLOR=darkorange]//set up boxes[/COLOR]
[COLOR=black]a.redbox , a.whitebox , a.rosebox  {[/COLOR]
[COLOR=black]display:block;[/COLOR]
[COLOR=black]float:left;[/COLOR]
[COLOR=black]margin: 3px 0;[/COLOR]
[COLOR=black]width: 530px;[/COLOR]
[COLOR=black]height:22px;[/COLOR]
[COLOR=black]line-height:18px;[/COLOR]
[COLOR=black]color:#eeeedd;[/COLOR]
[COLOR=black]text-decoration:none;[/COLOR]
[COLOR=black]font-family:arial, verdana, sans-serif;[/COLOR]
[COLOR=black]text-align:left;[/COLOR]
[COLOR=black]cursor:pointer;[/COLOR]
[COLOR=black]font-size:1.2em;[/COLOR]
[COLOR=black]padding: 5px 5px 2px 5px;[/COLOR]
[COLOR=black]background: #5913c5;[/COLOR]
[COLOR=black]border: 2px solid #5913c5 ;[/COLOR]
[COLOR=black]}[/COLOR]
[COLOR=darkorange]//override colours for other boxes[/COLOR]
a.whitebox  {
 background: #eed;
 border: 2px solid #eed ;
 color: #333;
}
a.rosebox  {
 background: #bba3d5;
 border: 2px solid #bba3d5 ;
 color: #333;
}
[COLOR=darkorange]//set border colours for hover[/COLOR]
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; [COLOR=darkorange]//added as an indicator it is working[/COLOR]
 }

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!


[FONT=Fixedsys]_________________________________________________[/FONT]
[FONT=Fixedsys]| a.box (rollover)                              |[/FONT]
[FONT=Fixedsys]| _________  ________  _______       _________  |[/FONT]
[FONT=Fixedsys]||.left   | |.left  | |.left |       |.right  | |[/FONT]
[FONT=Fixedsys]||        | |       | |      |       |        | |[/FONT]
[FONT=Fixedsys]||        | |       | |      |       |        | |[/FONT]
[FONT=Fixedsys]| --------- --------- --------       ---------- |[/FONT]
[FONT=Fixedsys]|                                               |[/FONT]
[FONT=Fixedsys]-------------------------------------------------[/FONT]

EDIT: Obviously I meant DIVS in the title not dive