[Designing variable height container div]

Hi Wickham,

 

Many thanks for the speedy response. I believe that it is the second example that I am looking to achieve and I have set the footer to be positioned from the bottom of the container and so it does stay where I want it to. So far so good!

 

However, what I am still having difficulty with is getting the container to expand and shrink around the content in the child divs.

 

I've played around with the container div height, setting to auto means we see nothing, setting to 100% doesn't stretch when more content is added, setting to 140% displays beautifully when there is a lot of text but when there is not much, there is a great big gap between the end of the content in the text div and the footer (a yawning chasm).

 

Do I need to be looking at min & max heights?

 

http://www.fontanadesign.co.uk/harmony/location.html

 

Thanks again

 

Steve

[Designing variable height container div]

OK, I couldn't get the image to attach!

[Designing variable height container div]

What I am trying to achieve (and I?m sure it?s not the Holy Grail of web design) is for a container div that will expand in height in response to content within the child divs on the page.

 

So if there is a lot of text on a page in the text div, the container will expand in height to accommodate this. Likewise, if there is not much text, there shouldn?t be a huge gap between the end of the text and the bottom of the page.

 

I also have a footer div that will be used for W3C and designer logos as well as details of the last update for the site. The footer div needs to remain at 10px from the bottom of the container.

 

Previously I have had to resort to having different CSS files for different page lengths, and whilst this works, I would rather that it be dynamic as opposed to duplicating style sheets for this purpose.

 

CSS code attached plus a graphic representation of what I am trying to achieve.

 

In order to position the container in the centre of the user?s browser, I am using position:relative;

margin:auto;

 

I have searched in Google to see if anyone else has addressed this topic but cannot find anything specific although I have picked up a few hints and tips, such as setting height with html, body {height:100%} which does make a bit of a difference as if there is a lot of content, the container div does stretch. But when there is less content, there is a lot of blank space between the end of the content and the footer.

 

I have also tried searching the forums here but haven?t had any hits on the terms that I am using. Can anyone help?

 

Many thanks in advance.

 

PC running Windows XP with Dreamweaver CS3.

@charset "utf-8";

html, body {height:100%}

body {
   background-image:url(../images/background.jpg)
   }
#container {
   position:relative;
   width:900px;
   height:140%;
   z-index:1;
   margin:auto;
   background-color: #FFFFCC;
   font-family: Verdana;
   font-size: 14px;
   color: #000066;
   border: medium outset #000066;
}
#navigation {
   position:absolute;
   left:50px;
   top:100px;
   width:800px;
   height:50px;
   z-index:2;
}
#banner {
   position: absolute;
   height: 100px;
   width: 900px;
}
#text {
   position:absolute;
   left:50px;
   top:190px;
   width:800px;
   height:600px;
   z-index:4;
}
#footer {
   position:absolute;
   left:15px;
   width:870px;
   height:35px;
   z-index:5;
   bottom: 10px;
}
.h1 {
   font-family: Verdana;
   font-size: 24px;
   color: #000066;
   text-align: center;
   font-weight: bold;
}
#harmonylogo {
   position:absolute;
   width:100px;
   height:35px;
   z-index:1;
   right: 10px;
   bottom: 10px;
}
#checkincal {
   position:absolute;
   left:200px;
   top:270px;
   width:240px;
   height:150px;
   z-index:1;
}
#checkoutcal {
   position:absolute;
   left:595px;
   top:270px;
   width:240px;
   height:150px;
   z-index:2;
}
.footer {
   font-family: Verdana;
   font-size: 10px;
   font-weight: bold;
   color: #000066;
}