How should i style my content div and footer div so that: if my content is long then the content div will expend longer. the footer div will stick to the bottom of the div content.
<body>
<div id=master>
<div id=header>
<div id=content>
<div id=footer></div>
</div>
</div>
</div>
</body>
The following shows my css, but it doesn't work as how i want it to be.
body {
background-color: #03C;
margin: 0px;
padding: 0px;
height: 100%;
}
#master {
width: 920px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;
height: auto;
}
#header {
position:absolute;
width:920px;
height:100px;
z-index:1;
top: 25px;
left: 0px;
background-color: #000099;
font-size: 16px;
text-transform: uppercase;
font-style: normal;
line-height: normal;
font-weight: bolder;
font-variant: normal;
color: #FFF;
text-align: center;
margin: auto;
}
#content {
position:absolute;
width:920px;
height:900px;
z-index:2;
left: 0px;
top: 100px;
background-color: #FFFFFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 20px;
/* [disabled]padding-left: 130px; */
padding-top: 20px;
text-align: center;
}
#footer {
position:absolute;
width:920px;
height:30px;
z-index:3;
background-color: #000099;
bottom: 0px;
color: #FFF;
left: 0px;
top: 1000px;
}
You don't even need CSS to achieve what you're asking, you've described the normal flow of block elements.
This will do what you want:
<div id="header"></div>
<div id="content">
Content here.
</div>
<div id="footer"></div>
Main things you need to look at are that I haven't nested the footer within the content and I haven't got any elements positioned absolute, which is causing your problem.
Your CSS can be greatly simplified to this:
div#header,
div#content,
div#footer
{
width: 920px;
margin: 0 auto;
}
div#header
{
height: 100px;
background: #009;
}
div#content
{
background: #FFF;
}
div#footer
{
height: 30px;
background: #009;
}