Help Creating 2 Column Layout with Header, 100% Height, and “Sticky” Footer
Hello…
I know there have been similar posts, but I’m needing help laying out my page via DIVs and CSS. I’ve spend way too much time searching the Internet and trying different things, but I can’t figure it out. So, I’m here to ask for help.
What we need is a two column layout (left column approx. 200px with the right column 100% for the rest of the width). We need a header on top and a footer on bottom. Both the header and footer can be fixed heights if that’s what’s needed. The footer needs to “stick” to the bottom of the browser. The two columns both need to fill in 100% height down to the footer when the content is short, and push the footer down when the content is long. Finally, we need this to be a CSS-only solution (no JavaScript).
First question… Is this even possible? Like I said, I’ve been spending way too much time trying to get this working and no luck.
(note: In the examples below, I had to change the DOCTYPE and remove all URLs to get the post to go through.)
Here’s one of my close attempts in which I have 2 columns but the footer is pushed down past the bottom of the brower:
HTML
<!DOCTYPE html PUBLIC DTD XHTML 1.0 Transitional xhtml1-transitional.dtd">
<html>
<head runat=“server”>
<title></title>
</head>
<body>
<form id=“form1” runat=“server”>
<div class=“header”>
Header
</div>
<div class=“wrapper1”>
Page Content1
</div>
<div class=“wrapper2”>
Page Content2
</div>
<div class=“push”></div>
<div class=“footer”>
Footer
</div>
</form>
</body>
</html>
CSS
*
{
margin: 0;
}
html, form
{
height: 100%;
}
body
{
border: 0;
font-family: ‘Trebuchet MS’, Tahoma, Verdana, Helvetica, Arial, ‘MS Sans Serif’;
/* font-size: small; */
height: 100%;
margin: 0;
padding: 0;
}
.header
{
height: 120px;
background: Yellow;
}
.wrapper1
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
width: 200px;
float: left;
background: Green;
}
.wrapper2
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
margin-left: 200px;
background: Blue;
}
.footer, .push
{
height: 60px;
clear: both;
}
.footer
{
background: Red;
}
Here’s another attempt where I get the footer in the right place but I can’t get the 2 columns:
HTML
<!DOCTYPE html PUBLIC DTD XHTML 1.0 Transitional xhtml1-transitional.dtd">
<html>
<head runat=“server”>
<title></title>
</head>
<body>
<form id=“form1” runat=“server”>
<div class=“wrapper”>
<div class=“header”>
Header
</div>
Page Content
<div class=“push”></div>
</div>
<div class=“footer”>
Footer
</div>
</form>
</body>
</html>
CSS
*
{
margin: 0;
}
html, form
{
height: 100%;
}
body
{
border: 0;
font-family: ‘Trebuchet MS’, Tahoma, Verdana, Helvetica, Arial, ‘MS Sans Serif’;
/* font-size: small; */
height: 100%;
margin: 0;
padding: 0;
}
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
background: Blue;
}
.header
{
background: Yellow;
height: 120px;
}
.footer, .push
{
height: 60px;
clear: both;
}
.footer
{
background: Red;
}
Thanks!!!
