4

I have what seems like a simple problem, but i have yet to find a solution. I have a series of divs which may vary in height, thought they will generally be the same width. I would like a fluid layout that basically ends up generating a variable number of columns as the page is resized. Perfect for float left. The problem is that when the divs are different heights, there ends up being a lot of white space vertically between the elements.

Clearly, the simple solution is to write some javascript to do all of this for me. But i would hate to have to resort to that if there's a css solution.

Here is a simple example:

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Simple Float Example</title>

        <style type="text/css">
            .dv { border: solid 1px red; float: left; width: 300px; }
        </style>

    </head>
    <body>
        <div>
            <div style="height: 40px;" class="dv"></div>
            <div style="height: 20px;" class="dv"></div>
            <div style="height: 60px;" class="dv"></div>
            <div style="height: 20px;" class="dv"></div>
        </div>
    </body>
</html>

You'll see that when the page is very narrow, everything looks as you would expect. All of the divs stack up. If you expand the page to full size, yet again - everything looks fine. But when there are 2 or 3 columns, look how much extra space there is. I'd post an image, but my reputation does not yet permit me to do so.

Anyway, i experimented with various display and position settings, and i couldn't get it to really do what i want.

Any suggestions? Thanks!

-RP

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Justavian
  • 103
  • 1
  • 6
  • Have you thought about making the heights percentage based instead of fixed values? Or maybe I'm misunderstanding the question. – Robert Apr 13 '11 at 23:28
  • Robert - the heights actually aren't going to be so straightforward. I won't be setting pixel heights at all. Rather, the heights will vary based upon the contents. Only the widths will be set. So i can't do percentage heights either... – Justavian Apr 14 '11 at 01:51

2 Answers2

2

Are you after this type of look?

http://desandro.com/resources/jquery-masonry/

If so, no, there is no easy way to handle that with pure CSS. You need a bit of JS as well.

DA.
  • 39,848
  • 49
  • 150
  • 213
2

There is no particularly good way to generically handle this with CSS.

Read this previous answer I wrote that goes over the various options, and shows that they don't work:

CSS Floating Divs At Variable Heights

You're stuck with JavaScript. Fortunately, the JavaScript you need has already been written in the form of a jQuery plugin:

jQuery Masonry

I've suggested the same thing before:

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Great - although i was figuring this would require some javascript, i was not familiar with Masonry. Despite a good hour of searching the web, i miraculously missed the simple combination of "float whitespace", which appears would have gotten me to the answer i needed... – Justavian Apr 14 '11 at 01:58