How to position DIV at bottom of page between two vertical navigation bars
- by proficients
I'm having trouble being able to do two things. I can always seem to accomplish one, but not the other. I'd like to have my footer always appear at the bottom of the page AND take up 100% width of the content container.
HTML:
<div id="wrapper">
<div id="nav_open">
nav_open
</div>
<div id="content">
<div id="content_header">
content_header
</div>
<div id="content_body">
content_body
</div>
<div id="content_footer">
Footer
</div>
</div>
<div id="nav_closed">
nav_closed
</div>
</div>
CSS
html, body { margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
border: none;
}
#wrapper { position: relative;
width: 100%;
min-width: 940px;
min-height: 100%;
height: 100%;
border: 1px solid #ff0000;
}
#nav_open { position: absolute;
top: 0px;
left: 0px;
width: 125px;
height: 100%;
border: 1px solid #ff0000;
}
#content { top: 0px;
margin-left: 126px;
margin-right: 201px;
min-height: 100%;
height: 100%;
border: 1px solid #ff0000;
}
#nav_closed { position: absolute;
top: 0px;
right: 0px;
width: 200px;
height: 100%;
border: 1px solid #ff0000;
}
#content_header { border: 1px solid #ff0000;
}
#content_body { border: 1px solid #ff0000;
}
#content_footer { height: 15px;
background: #df781c;
border: 1px solid #ff0000;
}
