So I’ve been sitting here for the past few hours trying to figure this (what seems to be) simple issue. I’m trying to create a page that has a header, navbar, main div, and then a sticky footer image at the bottom. However, I’m having issues when it comes to the content div (100% height). I finally got it working, but now my header is causing problems. If I put it inside the wrap, it’s got the background color of the wrap, which I don’t want. Putting the background color anywhere else doesn’t work. If I put it outside the wrap, it forces my page to scroll(?) when it doesn’t need to and causes problems with my background gradient. I’m going crazy! Any help?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="layout/logo.png" alt="Live Equian" height="50" width="200" />
</div> <!--END LOGO-->
</div> <!--END HEADER-->
<div id="navigation">
</div> <!--END NAVIGATION-->
<div id="wrap">
<div id="main">
<div id="contentwrapper">
<p>Your website content here.</p>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {
height: 100%;
min-height:100%;
/* GRADIENT BACKGROUND
thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
/* and http://www.puremango.co.uk/2010/04/css-gradient/ */
/* fallback (Opera) */
background: #8cb6e9;
/* Mozilla: */
background: -moz-linear-gradient(top, #8cb6e9, #e0effc);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#8cb6e9), to(#e0effc));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#8cb6e9', EndColorStr='#e0effc', GradientType=0);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#wrap {
min-height: 100%;
margin: 0 auto;
width:1000px;
background-color:#FFFFFF;
border-right:1px solid #a89d6d;
border-left:1px solid #a89d6d;
}
#main {overflow:auto;
padding-bottom: 116px;
height: 100%;
min-height: 100%;
} /* must be same height as the footer */
#footer {position: relative;
margin-top: -116px; /* negative value of footer height */
height: 116px;
clear:both;
background-image:url(layout/footer.png);
width:100%;
background-position:center;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
#contentwrapper {
height:100%;
min-height:100%;
}
