[thelist] aligning floated divs.

Liam Delahunty ldelahunty at britstream.com
Tue Mar 25 08:24:30 CST 2003

I'm looking up a bunch of products from a database and floating the results
using css thus:

div.float {
	float: left;
	width: 120px;
	border: 1px solid #000000;
	text-align: center;
	background-color: #ffffff;
	margin: 2px;
	padding: 2px;

div.float img {
	border: 1px solid #000000;

div.float p {
	text-align: center;
	margin: 0px;
	padding: 0px;
div.float A {text-decoration: none; font-size: 0.8em;}

My problem is if one he heights is taller than the others, then the divs
will wrap badly. I've got fixed widths on the divs, but want to avoid fixed
heights if possible.

I want:
{} {} {} {}
{} {} {} {}

But if the heights vary I can get:
{} [] {} {}
	{} {}
{} {} [] {}

... or worse!

does that make sense?

These look more or less like I want them too:

but this has problems...

Kind regards, Liam Delahunty, Mega Products Limited
http://www.onlinesales.co.uk/ Open Source PHP/MySQL E-commerce
http://www.liamdelahunty.com/ web/ design/ database/ programming
http://www.britstream.com/ Hosting/ Domain Names From UKP 7.50 p.a.

More information about the thelist mailing list