General Page Layout Help

[scottybwoy]

Hi all,

 

I think my problem may span php and html problems as well, but css is probably the main issue here.

 

Please take a look at this page and see its layout behaviour.

 

It's generated by this php code with embedded html :

<?php

$i = 0;

foreach ($objs as $category => $v) {

echo "<a href='" . $objs->$category->drivers . "'><h2>" . $objs->$category->name . "</h2></a>";

$sub_cats = $objs->$category->sub_cats;

foreach ($sub_cats as $sub_cat => $sub_arr) {
	if (!empty($sub_cats->$sub_cat->drivers)) {
		if($i & 1) echo "<div class='r50'"; else echo "<div class='support'><div class='l50'";

		$modelsids = $sub_cats->$sub_cat->model_ids;
		$height = count($modelsids) * 1.5;
		$height += 2.2;

		echo " style='height:" . $height . "em;'><a href='" . $sub_cats->$sub_cat->drivers . "'><h3>" . $sub_cats->$sub_cat->name . "</h3></a>\n\t";

		if (!empty($modelsids)) {
			foreach ($modelsids as $modelsid => $model) {
				if (!empty($modelsids->$modelsid->drivers)) {
					echo "<a href='" . $modelsids->$modelsid->drivers . "'>MRI-" . $modelsid . "</a>\n\t";
				}
			}
		}

		echo "</div>\n";
		if($i & 1) echo "</div>\n";
		$i++;
	}
}

if($i & 1) echo "</div>\n";
echo "<p style='clear:right;'> </p>";
$i = 0;
}

echo "</div></div>";

?>

 

And uses this css :

.support {
display: block;
clear: right;
height: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}

.support div {
display: block;
clear: none;
width: 45%;
margin: 0 1%;
padding: 0;
font-size: 0.9em;
}

.support div h3 {
margin: 0;
padding: 0 10px;
font-size: 1em;
font-weight: bold;
text-decoration: none;
}

.support a {
display: block;
clear: none;
margin-top: 0.3em;
padding-left: 10px;
color: #000080;
}

div.l50 {
float: left;
width: 48%;
margin: 3px 0 0.3em 1%;
}

div.r50 {
float: right;
clear: right;
width: 48%;
margin: 3px 0 0.3em 1%;
}

 

Any tips on my markup and the way I do things would be appreciated as well as helping me solve the layout issue, whereby some divs are overlapping the h2 elements and messing other divs on the right meant to be on the left.

 

Thanks

[scottybwoy]

Or Basically what I want to achieve is the structure of two columns of Divs or varying height, sitting next to each other and when there is space to the left to slot into it.

 

Without float otherwise the h elements get affected.

 

I hope that clears things up.

[scottybwoy]

OK, I have played around with this and narrowed down my problem (and now believe this should be in the html section, but never mind). 

 

I have used a <p> element to clear the bottom of my divs.  This works fine if an even number of divs sit with each other in a particular part of the page.  I believe this is down to the <p> element and more to the point, my post <h2> element, both have the feature of sitting under the element to the left and using the available space to the right for the elements content.

 

Is there a way around this, like to make it some sort of block element?

 

Please look at the page and it's source to see how it is displayed, thanks.