Same height for elements

Last modified date

Comment: 1

Surely this is easy, right? Just set the height property in your css. Well, yes and no. That’s all well and good if you know what height the elements are going to be, but quite often you might be pulling information out of a database in to the elements and you don’t know how big that information is going to be. You can’t use the overflow because that’s not the designer’s concept. No; they want three boxes on screen that all have the same height so they’re all nice and ordered and symmetrical.


What about using tables?

Wash your mouth out! No, of course we don’t want to use tables. Instead that old friend of ours, javascript, comes to the rescue. Using that fabulous library Prototype, because I’m lazy, you could do something like this:

 
 

What does it do?

The title of the post should be enough to give it away. It makes the elements you decide all have the same height. If you use the class max-height then the elements will all be the same height as the tallest one, and if you use min-height they will have the same height as the shortest one.

How do you use it?

Simply drop in one of the classes on all the divs you want to make the same height, for example:

some text
more
more
more
more
more
more
more
more
more
final bit of text
final bit of text
final bit of text
not resized...

And everyone is happy…

The designer is happy because you’ve retained the nice symmetrical boxes. You’re happy because you’re using nice clean code that’ll degrade nicely. I’m happy because you’ve read this. 🙂

Share

1 Response

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.