I am currently facing a roadblock and can't figure out how to solve it. My website has a sticky footer that is working fine, but I want the footer to have a width of 100%. To achieve this, I have an outer div that pushes the footer to the bottom and a content div that is centered.
Usually, I set a background color for the full outer div, which means that the header, content, and footer all have the same background color. However, I can set a custom color for each div to override the white overlay.
The issue arises because the layout now has a width of 100%, making it difficult to give the content div a background color that extends all the way to the footer.
To simplify my previous explanation, here is my question: How can I have a header and footer with a width of 100% while keeping the content centered with a white background extending till the footer? Note that the content height may be less than or equal to 100%.
Below is the HTML code I am using:
<!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>
<title>Temp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="outer">
<div id="outer_header">
<div id="header">
<div id="menu_block"></div>
<div id="image_block"></div>
</div>
</div>
<div id="outer_content">
<div id="content">
dafdafdafda
</div>
</div>
<div id="clearfooter"></div>
<div id="outer_footer">Footer - | |- Footer </div>
</div>
</body>
</html>
Here is my CSS code:
/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
padding:0;
margin:0;
text-align:center; /* for ie6 and under */
min-width:1024px;
background-color: #eee8d8;
color: #000000;
}
#outer {
min-height:100%;
min-width:1024px;
width:100%; /* add 2px if borders are not used */
text-align:left;
margin:auto;
position:relative;
}
* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/
#outer_header {
height:280px;
width:100%;
float:left;
position:relative;
background-color:#1f4c3f;
}
#header {
height:280px;
width:1000px;
margin:auto;
position:relative;
}
#menu_block {
width:1000px;
height:90px;
}
#image_block {
width:1000px;
height:190px;
background-color:#FFFFFF;
}
#outer_content {
width:100%;
position:relative;
float:left;
background-color:red;
}
#content {
width:1000px;
height:100%;
position:relative;
margin:auto;
background-color:#FFFFFF;
}
#outer_footer {
width:100%; /* add 2px if borders are not used on the #outer div */
clear:both;
height:50px;
background-color:#1f4c3f;
left:0;
bottom:0;
position: absolute;
}
* html #outer_footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
margin-bottom:-1px;
}
div,p {margin-top:0}/*clear top margin for mozilla*/
#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
Note: Ideally, I would like to achieve this using only CSS without relying on JavaScript.
Edit: Desired result: Picture one shows 1 row of white space (because the text ends there), but I want the content to fill up until the sticky footer...