Vertically aligning floated DIVs with varying heights?

It does use jQuery and adds a bit of extra markup - not sure if that's acceptable.

It does use jQuery and adds a bit of extra markup - not sure if that's acceptable. jsfiddle.net/Awg3u/7/ I've only tested in Chrome/FF so far, and haven't checked in IE yet.

– g_thom Aug 1 at 22:17 This seems to work well. I accept that jQuery is probably needed but this is quite a neat function.Thanks. – Joe Aug 1 at 22:23 Yes, sometimes jQuery is just the thing.

I'm tantalized by the CSS-only option, though. Glad this worked for you. – g_thom Aug 1 at 22:29.

Robertnyman. Com/2010/02/24/… – Cody Caughlan Aug 1 at 21:56 "...there’s one giant drawback, that might or might not apply to your use case. " and personally I do not see that as an enormous drawback especially when this method has so much usefulness.

– Joseph Aug 1 at 21:59 Please note that inline-block is only decent supported by IE>=8 – PeeHaa Aug 1 at 22:04.

You basically want to find the maximum height for each box and then take the largest and set every other box to that height. There should be any number of jQuery plugins that can do this or you can roll your own.

I thought of this but I'm not too hot at creating jQuery functions. Essentially I would need to compare each even DIV to its odd equivalent, decide which is the longest, then apply that height to the shorter one? – Joe Aug 1 at 22:09.

Not sure if I understand what you want correctly. If not correct me please. If you want the all the first divs of the rows to have the same height (based on the first div) you could do something like: (function() { var first = true; var height = 0; var pos; $('.

Box'). Each(function() { if (first) { // do we have the first div? Height = $(this).height(); // set height and pos from left of first div to be used by other divs pos = $(this).position(); } first = false; var current_pos = $(this).position(); if (current_pos.

Left == pos. Left) { // are we the first div in a row, e.g. The most left div? $(this).

Height(height); // set height to match the first div } }); })(jQuery); jsfiddle.net/Awg3u/3.

Sorry, I mean the columns in each row should start at the same vertical position. – Joe Aug 1 at 22:07.

You can add clearing div after every 2 blocks as follows: Or you can wrap your rows in a new DIV. .......etc.

The Divs are created on the fly though, so I would have to add the clearing class with jQuery afterwards though I believe. If I were going to do that, I may as well try and hack together a function for changing the DIV height if I've understood it correctly. – Joe Aug 1 at 22:11 All blocks must be of the same height?

And equal to the height of the tallest div? – avetarman Aug 1 at 22:15.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.