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;
}