[thelist] aligning floated divs.

Liam Delahunty ldelahunty at britstream.com
Wed Mar 26 02:49:39 CST 2003


>>Liam Delahunty wrote:
>> div.float {	float: left; ... 	}
>>
>> I want: *
>> {} {} {} {}
>> {} {} {} {}
>>
>> But if the heights vary I can get:
>> {} [] {} {}
>>    {} {}
>>
>Mike Stenhouse wrote:
> I did something similar a while back by putting each row of floating
> divs in another div, emulating a table layout. To make the divs wrap
> nicely you just have to put clear:left; on that container. e.g.
>
> div.row {	clear:left;}
>
> So what you end up with looks something like this:
>
> <div class="row">
> <div class="float"><img /></div>
> <div class="float"><img /></div>
> <div class="float"><img /></div>
> </div>

I actually want a liquid design, with the columns wrapping to availble
space. As you say that's emulating a table, and I was hopping to get away
from that. With the divs (without the row class), if you've the space I'd
get:
{} {} {} {} (} {} ...

on a smaller window it'd wrap:
{} {} {}
{} {} {}

if you see what I mean.

If no one has a solution to the height problem (without fixing the height)
then I think I'll try getting the page width using javascript and writting
out the row class as you suggest, so I'd at least be using the availble
window space.

Or, I could read in all the image data from the db first, then size the
height of the divs based on the tallest / widest image for that particular
gallery.

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



More information about the thelist mailing list