Trying to finish a design, and can't get past one little CSS issue

Question

I have a design I'm working on that is almost complete, but I'm having trouble getting the CSS to do what I want. What I am trying to do is something like this:

Figure 1, How it's supposed to look

However, when the page is generated, this is what the output looks like:

Figure 2, What it's doing

How can I get the third box to float up under the first and next to the second? I have tried every trick I know, but can't get it to work. I should also mention that each block is added to the page by a loop in PHP pulling from a database, so I'm kinda limited by not having static content, and have no way of knowing ahead of time how tall a particular block is going to be.

I would suggest trying a different load order ... think of them as items in columns, instead of rows. — HMartch, May 02 '12 at 15:58
You could try `column-count` instead. Although that will place them in a different order. — powerbuoy, May 02 '12 at 16:01

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

If the number of columns is variable, CSS can't really do it (if you want it to work in all common browsers), so instead use jQuery Masonry which is designed to solve exactly this problem.

Here's me saying the same thing, but with more words: CSS two columns with known children width

edited May 23 '17 at 11:48

Community

1
1

answered May 02 '12 at 16:00

thirtydot

224,678
48
389
349

I was hoping to avoid javascript (as I don't really speak the language, so it's harder to fix should something break), but it seems that given my situation, it's the only option. Thanks for the pointer to the Masonry script. – Keith S. May 03 '12 at 11:51
I just noticed there's also [Vanilla Masonry](http://vanilla-masonry.desandro.com/), which appears to be just like jQuery Masonry, but without the jQuery dependency. Useful if you're not already using jQuery in your project. – thirtydot May 03 '12 at 11:55

score 1 · Answer 2 · answered May 02 '12 at 22:28

Per the second layout, a good option is using three primary columns. There are several grid systems available including Twitter Bootstrap and 960 Grid that will help you get the basic framework laid out quickly and sans quirks. When divs (block elements) fall within any of the three columns, they'll stack up, top-to-bottom, naturally.

Regarding the bottom of the divs lining up perfectly, you'll be able to use JavaScript to calculate the overall height of the parent of the columns (which will naturally inherit the height of the tallest column), calculate the total height of the block elements within each column, and use javascript to add the difference in height to the lowest block element for each.

Be sure to account for padding and margin in the JS height calculations.

Once you start using JavaScript for this, you might as well just use jQuery Masonry. — thirtydot, May 03 '12 at 08:54

score 0 · Answer 3 · answered May 02 '12 at 16:01

0

Try putting the divs into 3 columns instead of stacking them in the order they appear.

answered May 02 '12 at 16:01

Ollie

646
4
13

score 0 · Answer 4 · answered May 02 '12 at 16:01

That behaviour is because of the float rules. The top of a floating element cannot be over the top of another element that came before it in the normal flow of the page. I don't know exactly how you position your elements but you might want to look into that.

Here is the Css Specs for float: http://www.w3.org/TR/CSS2/visuren.html#float-rules (It's css2 but the rules still apply) Look at rules 5 and 6

Trying to finish a design, and can't get past one little CSS issue

4 Answers4