How do i make a fluid float:left layout?

views:

answers:

How do i make a fluid float:left layout?

For example, i'd like to have a grid of boxes all floating left. I have the design here: atbskate.com/trusktr.

The boxes on my site are all float:left. However, when i expand a box by adding content into it (ajax) it shifts the other boxes and leaves an ugly empty space. I'd like for the boxes to fill up this empty space.

The idea would be similar to http://www.robclarke.com/. when you click on a box, it expans, and all the other boxes are shifted and there is no empty space. How can I avoid this empty space?

The code on robclarke.com is very complex so i ahven't had time to disect it...

Any ideas?

I found this the other day: http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/ It is using a combination of CSS and Jquery to make "smart columns" I've yet to try it myself, but it seems well documented.

Jon Harding 2010-09-22 13:42:46

That's interesting. It's a cool trick, although it's not exactly what i'm looking for.What I mean is that if you change the height of one box, then it adds ugly space to the whole page.

trusktr 2010-10-12 18:30:36

Here's a screenshot of what happened after I made one box taller:http://bettafootwear.com/~/images/grid_ugly_space.png

trusktr 2010-10-12 18:39:12

I was just wondering if perhaps there's some javascript somewhere to achieve this Without having to spend days or weeks decoding http://www.robclarke.com/ to figure out how his site works.

trusktr 2010-10-12 18:39:38

ansaurus

tags:

views:

answers:

How do i make a fluid float:left layout?

related questions