kiekar
04-19-2008, 09:56 AM
Hello,
I am using a two column layout for my web page. I want to implement the sticky footer technique to the page. I’ve played around with this technique with a one column layout with success using browser IE7, Firefox 2.0, and Opera 9.27. This technique will work if the content does not fill the page or extends beyond the page.
When using a two column layout with content extending longer than the browser on Firefox and Opera, the footer does not get pushed to the bottom. When adding overflow: hidden to the wrapper div, the problem was corrected for content extending longer but caused the footer to jump up below the content on a browser with smaller content.
I've also attached screen prints for clarification. If anyone has any suggestions, it would be much appreciated.
Thanks
Karl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="TwoColumnLayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="header">
Header goes here...
</div>
<div id="sidebar">Sidebar content goes here...</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
Footer goes here...
</div>
</div>
</form>
</body>
</html>
[CODE]
* {margin: 0; padding: 0}
html, body, form
{
font-family: Trebuchet MS;
font-size: small;
height: 100%;
}
#wrapper
{
width: 800px;
margin: 0 auto;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header
{
background-color: #E6E6E6;
}
#sidebar
{
background-color: #BEBEBE;
width: 30%;
float: left;
}
#content
{
width: 69%;
float: right;
padding-bottom: 3em;
}
#footer
{
clear: both;
background-color: #E3E3E3;
position: absolute;
bottom: 0;
height: 3em;
width: 100%;
}
CODE]
I am using a two column layout for my web page. I want to implement the sticky footer technique to the page. I’ve played around with this technique with a one column layout with success using browser IE7, Firefox 2.0, and Opera 9.27. This technique will work if the content does not fill the page or extends beyond the page.
When using a two column layout with content extending longer than the browser on Firefox and Opera, the footer does not get pushed to the bottom. When adding overflow: hidden to the wrapper div, the problem was corrected for content extending longer but caused the footer to jump up below the content on a browser with smaller content.
I've also attached screen prints for clarification. If anyone has any suggestions, it would be much appreciated.
Thanks
Karl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="TwoColumnLayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="header">
Header goes here...
</div>
<div id="sidebar">Sidebar content goes here...</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
Footer goes here...
</div>
</div>
</form>
</body>
</html>
[CODE]
* {margin: 0; padding: 0}
html, body, form
{
font-family: Trebuchet MS;
font-size: small;
height: 100%;
}
#wrapper
{
width: 800px;
margin: 0 auto;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header
{
background-color: #E6E6E6;
}
#sidebar
{
background-color: #BEBEBE;
width: 30%;
float: left;
}
#content
{
width: 69%;
float: right;
padding-bottom: 3em;
}
#footer
{
clear: both;
background-color: #E3E3E3;
position: absolute;
bottom: 0;
height: 3em;
width: 100%;
}
CODE]