Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How To Float Divs Left With Shorter Divs One Below Anoter

Post a Comment
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

Solution 1:

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><styletype="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><divclass="large">1</div><divclass="large">2</div><divclass="smallblock"><divclass="small">3</div><divclass="small">4</div></div><divclass="smallblock"><divclass="small">5</div><divclass="small">6</div></div><divclass="large">7</div></body></html>

Solution 2:

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:

Post a Comment for "How To Float Divs Left With Shorter Divs One Below Anoter"