# Dive with rollover and nested floats

**URL:** https://forum.kirupa.com/t/dive-with-rollover-and-nested-floats/273115
**Category:** web dev
**Created:** [October 11, 2008, 2:34pm UTC](https://forum.kirupa.com/t/dive-with-rollover-and-nested-floats/273115 "2008-10-11T14:34:54Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![W92Baj](https://avatars.discourse-cdn.com/v4/letter/w/a88e4f/32.png) [@W92Baj](https://forum.kirupa.com/u/W92Baj)
#### Post date: [October 11, 2008, 2:34pm UTC](https://forum.kirupa.com/t/dive-with-rollover-and-nested-floats/273115/1 "2008-10-11T14:34:54Z")

</div>

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:

```auto

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:

```auto

[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:

```auto
.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!

```auto

[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