My site has a form and within it there is a locations section with 3 states, a select all locations checkbox, a County Title which on select checks all the towns/cities beneath it and the Towns/Cities checkboxes. Here is the PHP to give you a better idea:
$str = '<input id="chkMaster" onclick="checkAllEnquiryLocation();" type="checkbox" value="AR000" name="location[]" /> <strong>All Locations</strong>'."
"."<br>";
$sql = "SELECT location_area_code, location_area_name FROM emg_location_area";
$rs = $db->query($sql);
if ($db->get_num_rows($rs))
{
while ($row = $db->fetch_row($rs))
{
$str .= '<div id="loco-column">';
$area_Code = $row['location_area_code'];
$area_Name = $row['location_area_name'];
$str .= '<input onclick="checkAll_'.$area_Code.'()'.';" id="'.$area_Code.'" type="checkbox" value="'.$area_Code.'" name="location[]" /> <strong>'.$area_Name.'</strong>'."
"."<br>";
$xtpl->assign("function_id", $area_Code);
$sql = "SELECT location_code, location_name
FROM emg_location
WHERE location_area_code='".$row['location_area_code']."'";
$rs1 = $db->query($sql);
if ($db->get_num_rows($rs1))
{
while ($row1 = $db->fetch_row($rs1))
{
$k = $row1['location_code'];
$v = $row1['location_name'];
$str .= '<input id="'.$area_Code.'_'.$k.'" type="checkbox" value="'.$k.'" name="location[]" /> '.$v."
"."<br/>";
$xtpl->assign("element_id", $area_Code."_".$k);
$xtpl->parse("main.area_check_all.element");
}
$xtpl->parse("main.area_check_all");
$str .= '</div>';
}
}
I want these to display like this: Ebay's grid list view if you scroll down the page you'll see how even though some listings are different sizes they fit inline and fill the selected area perfectly.
I thought this would be quite simple I have looked around and the only way i can see how to do this is with more php but is there a cleaner way to do this in CSS that anyone knows about?
Heres my attempt with css, it almost works but the smaller list of locations seem to get stuck on the right hand side of the container:
#loco-column{ display:inline-block; max-height:200px; float:left; padding-left:10px; margin-bottom:20px; }