Making blocks of different heights line up

[tyutghf]

I have five content blocks in a line on a page, if the content of the blocks is the same they all line up, but if one has a little more content than the others i.e. 5 lines tall instead of 4 then than one drops out of line with the others. I have made the box taller than it needs to be so that even the block with the longer content fits into the block fine but it is still out of line.

Here's my code

<div class='promo'>
<h2>Title</h2>
<p>This is some text This is some text This is some text This is some text This is some text This is some text</p>
</div>
<div class='promo'>
<h2>Title</h2>
<p>This is some text This is some text This is some text This is some text This is some text This is some text</p>
</div>
<div class='promo'>
<h2>Title</h2>
<p>This is some text This is some text This is some text This is some text This is some text This is some text</p>
</div>
<div class='promo'>
<h2>Title</h2>
<p>This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text</p>
</div>
<div class='promo'>
<h2>Title</h2>
<p>This is some text This is some text This is some text This is some text This is some text This is some text</p>
</div>

and this is the css

.promo {display: inline-block; width: 359px; height: 173px; max-height: 173px; padding: 20px; margin-left: 36px; overflow: none; background: transparent url('images/promo.png') no-repeat left top;}
.promo h2 {margin: 0px; font-size: 1.8em; text-transform: uppercase; font-weight: normal}
.promo p {font-size: 1.4em}

I tried putting another div around these blocks with vertical-align: top but that didn't work to keep them in line. Is there something in css that will do this?

Thanks

 

[ChrisHirst]

Some javascript I wrote about twelve years ago,

http://www.candsdesign.co.uk/articles/dhtml/layout/same-height-columns/

One day I will tidy it up.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

Not sure how JS can help here.

But personally, I'd just float the divs rather than making them inline blocks.

.promo {float:left; ... }

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[darryncooke]

are you looking to make columns of equal height?

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Its not a very easy task but it is accomplished.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[ChrisHirst]

But personally, I'd just float the divs rather than making them inline blocks.

But floating isn't going to make the all the same height.

but if one has a little more content than the others i.e. 5 lines tall instead of 4 then than one drops out of line with the others

Which appears to be what the TS wanted/wants.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

But floating isn't going to make the all the same height.

They are already the same height.

I have made the box taller than it needs to be so that even the block with the longer content fits into the block fine but it is still out of line.
...

.promo {display: inline-block; width: 359px; [COLOR=#A40000]height: 173px; max-height: 173px;[/color] ...

If you took a look at the code, you'd realize the difference is not in the height of the divs, but their position. For some reason divs after the one with more content drop down a little in relation to the rest of the divs.

Floating gets rid of that issue. Though there's still the need to figure out why inline_block causes that.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[vacunita]

Correction, the Div with more content moves up a little:

[tab]       -------
 -------  |       |  -------
|       | |       | |       |
|       |  -------  |       |
 -------             -------

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech