CODEWITHSUNDEEP
csshtmlposition
Dennis Hackethal
Dennis Hackethal

Reputation: 14285

Flexible div positioning

I have several divs on a page that all have the same width but different heights. They are all in one div, the #note1PreviewDiv. They all share the class .note, which has the following css code (among other):

.note{
    width: 160px;
    padding: 10px;
    margin: 10px;
    background: #e3f0ff;
    float: left;
}

I thought with float: left; they would all automatically align so that they are well aligned among each other.

Here's a preview of what it looks like:

Current state http://posti.sh/img/ist.png

And here's what the positioning should be like:

Desired state http://posti.sh/img/soll.png

I think you get the idea. Somehow it seems to me the height of the leftmost div pushes the other divs in the second row to the right - but that's only guessing.

Thanks for your help!

Charles

Upvotes: 1

Views: 416

Answers (3)

Moin Zaman
Moin Zaman

Reputation: 25455

You're not going to be able to do this easily with CSS only.

CSS3 has a new feature called column layout, but browser support is not great. IE9 and below don't support it.

See http://designshack.net/articles/css/masonry/ and the last example for CSS3 solution.

Have a look at these js / jQuery options for easier implementation and browser support:

Upvotes: 2

spaceman12
spaceman12

Reputation: 1109

Is the height of the parent container given a fixed value? If it is, try setting the height of the parent container to auto, and the overlow propery to hidden.

Upvotes: 0

Rob Trickey
Rob Trickey

Reputation: 1311

The kind of lay out you want is really difficult (not possible?) without going for a column based approach and adding additional block elements to represent each column. This obviously won't work with a flexible number of columns if you want a dynamic layout based on screen size.

That said, you could always use JavaScript to dynamically place elements into columns, and get it to match the screen size.

Upvotes: 0

Related Questions