How to change the height of one div to use repeatedly within different HTML pages

[James]

Hi there!

Okay so basically what I’m trying to figure out is how to change the height of one div to use repeatedly within various pages of a website I’m creating.

I have about 10 different web pages and all of them differ in height. The home page has images and text on and I’m using a div called "content" which is 700px in height and this is fine to show the relative content. But I have another page which needs to be longer as more content and videos are placed on this page. In short, I have 10 different web pages that make up my web site and I would like to use the "content" div for each and every single page within the website instead of creating 10 different 'content' divs.

I've researched into the min-height and max-height properties and was wondering would this be the correct way of altering the height of the "content" div so elements can be placed in the div?

So I was thinking of making the "content" div have properties such as:

#content {
min-height:600px;
max-height:1000px;
}
 

As then I would be able to use the "content" div in each and every web page I’m creating instead of creating 10 different 'content' divs and naming them...#content-home #content-about-us #content-contact-us etc...

I look forward to any feedback.

Thanks,
James

[drhowarddrfine]

Those don't alter the height at all but limit them to that range.

Are you sure you need that at all? The div will expand/shrink with its content.

[Elisabeth Dietz]

Your div will get the needed size automatically if you fill it with content, but if you want to have the max and min set, your idea will work fine (except for Internet Explorer, as usual..)