Div height
 

Anybody got any ideas to control the height of a css div area? I dont want to set a specific height but for example the display something like this:

So the header in the div is input from a user and can end up being anything up to about 50 characters but sometimes will only be 10 for example so if each line of detail text underneath is guaranteed to be only one line (which it is) I am left with an annoying difference in div heights. What is the best way to handle this? I want these divs to be of equal height for aethetic reasons.

Wondering if i should just use a table with the div to make sure each div retains the same standard format.

Please ignore i just created a div for the header within the div and set a height % which has solved the problem.

great, that you solved it. I was just going to say to use percentages :P

I tried % initially but each browser handles them differently so when i looked at it in on my iphone using safari i assume it looked extreme but looked fine in Firefox. IE seems to be the worst though dead hard to get it to look just right in that. Getting to the stage where i feel maybe i should just start using some browser specific css. Thoughts?

Easiest way is to use javascript to calculate the tallest box and then set the heights of everything to match. Here is a jQuery plugin: http://www.cssnewbie.com/equalheights-jquery-plugin/

Many thanks wGEric. I'm still having problems with this, minor but problems nonetheless so i'm going to take a look at this link.

you can adjust of div height or width according your requirement. create a css class.