Question

I have a script which generates a DIV for each message written on a donation wall on my site. You can see the donation wall here.

This is the section of the script that generates the DIVs:

foreach( $donors as $donor ):
$output = '<div class="donorbox"><p><strong>'.$donor->name.'</strong> donated '.$donation.'<small class="date time">on '.$datetime.'</small><blockquote class="comment">'.nl2br($donor->comment).'</blockquote></p></div>';
endforeach;

I have set the width of each donorbox DIV to 43.5%, and added float:left, so that 2 always fit on each line.

Because the DIVs are going to have different heights, depending on how long the message the user writes, the display of the divs is rather uneven (see page linked to above). So I would like to find a way of centering the DIVs vertically so that there are always two per line, but so that they display more evenly, i.e. so that the vertical center point of the 2 DIVs is aligned.

Another problem with the current implementation is that when the height of a DIV on the left is greater than the height of the div on the right, the next div stays on the right side of the page, rather than being forced to the left side, and this is not what I want. You can see this now if you look at the page and reduce the width of your browser window. The third donorbox DIV stays on the right.

To hopefully make what I am on about clearer I include two images below:

CURRENT

REQUIRED

Answer 1

If you are unsure about the height of the element always use display: inline-block instead of float. If you change it now – they will always be positioned correctly. In order for them to be vertically centered – simply add vertical-align: middle to them as well 🙂

P.s. If you need IE7 support for display: inline-block; add *display: inline; *zoom:1; 😉