amnuts » Prototype http://blog.amnuts.com php projects, javascript, and... stuff. Fri, 07 May 2010 09:11:14 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Same height for elements http://blog.amnuts.com/2007/02/09/same-height-for-elements/ http://blog.amnuts.com/2007/02/09/same-height-for-elements/#comments Fri, 09 Feb 2007 23:52:22 +0000 Andy http://blog.amnuts.com/2007/02/09/same-height-for-elements/ 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. :-)

]]> http://blog.amnuts.com/2007/02/09/same-height-for-elements/feed/ 0