3

I have a list of dynamically generated divs that represent panels for selecting various options. There are two types of divs, regular ones and short ones. The height of the regular divs is set with javascript to te height of the tallest one. Additionally, if the height of te short div is less than half of the maximum it is set to half of that height, otherwise it is set to the full height.

What I would want to do now (preferably with CSS) is to list those items in such a way that if there is enough space, to put one short div below another sort div.

Here are some illustrations to hopefully make things clearer:

illustration 1

illustration 2

alh84001
  • 1,263
  • 1
  • 15
  • 25
  • I'm extremely curious to see the answer to this question - I have a lot of trouble with all things vertical in HTML/CSS also. Will look into it for you also. – Marty Apr 28 '11 at 07:41

2 Answers2

2

As far as I can see, this is not possible purely with CSS: If you provide the small boxes with clear: left, they will appear below all others. If you don't, they will appear next to each other.

The simplest workaround I can think of is to manually group two small boxes into a separate div. Here's a working example:

<html>
<head>
    <style type="text/css">
        div.large, div.small { width: 40px; margin: 5px; }
        div.large { height: 95px; background-color: blue; }
        div.small { height: 45px; background-color: red; }
        div.large, div.smallblock { float: left; }
    </style>
</head>
<body>
    <div class="large">1</div>
    <div class="large">2</div>
    <div class="smallblock">
        <div class="small">3</div>
        <div class="small">4</div>
    </div>
    <div class="smallblock">
        <div class="small">5</div>
        <div class="small">6</div>
    </div>
    <div class="large">7</div>
</body>
</html>
Heinzi
  • 167,459
  • 57
  • 363
  • 519
0

There is no generic pure CSS solution.

See a previous answer of mine for a comparison of the candidate techniques:

Unless you can use server-side code to manually calculate pixels and use position: relative / position: absolute; top: ?px; left: ?px, you will have to resort to JavaScript to handle the positioning.

This jQuery plugin is generally a good solution: jQuery Masonry

There's also a raw JavaScript version: Vanilla Masonry

I find myself recommending it somewhat regularly:

https://stackoverflow.com/search?q=user%3A405015+masonry

Some possibly relevant demos:

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • In the end I wrote a small jquery function to do the trick, but thank you on pointing out the Masonry plugin. It looks interesting and I'll definately keep it in mind when something similar is required – alh84001 Apr 29 '11 at 14:36