Issue with CSS, HTML and background colors. - html

Question

I have the following issue.
I have 2 sets of checkboxes with a title for each. That title is supposed to have a grey background, then the checkboxes area should have no color in the background.
The issue is that if I put only 1 set of checkboxes with its title, the backgrounds work good.
However, when I put the 2nd set of checkboxes, the checkboxes area of the 1st set has a grey background and seems to be inheriting the bg of the title of the 2nd set.
Here is the code. Any clue?
Thanks!
<div class="bgFilterTitles">
<h1 class="filterTitles">COLOR</h1>
</div>
<div class="boxes">
<?php
$colors = $con -> prepare("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1 ASC");
$colors ->execute();
while ($colorBoxes = $colors->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'> ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>
<div class="bgFilterTitles">
<h1 class="filterTitles">PRICE</h1>
</div>
<div class="boxes">
<?php
$prices = $con -> prepare("SELECT DISTINCT price FROM item_descr ORDER BY price ASC");
$prices ->execute();
while ($priceSort = $prices->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='price' value='".$priceSort[price]."' /><font class='similarItemsText'> ".$priceSort[price]."</font><br />";
}
?>
</div>
Here are the CSSs used:
.boxes {
width: 160px;
float: left;
padding: 10px;
border: 1px solid #C6C6C6;
clear: both;
}
.filterTitles
{
background-color: #F1F1F1;
font-family: Arial,Helvetica,Verdana,Sans-serif;
font-size: 11px;
font-weight: normal;
color: #333;
text-transform: uppercase;
padding: 4px;
border: 1px;
border-color: #C6C6C6;
border-top-style: dotted;
}

Answer 1

I'm not sure if I understood the problem correctly, is this what you were trying to do?
http://jsfiddle.net/mdLVG/
In that case you need to add clear:both; to your .filterTitles CSS class.