Home › Forums › CSS › Sticky Footer and Transparent Header › Reply To: Sticky Footer and Transparent Header
February 1, 2010 at 10:01 pm
#70368
Member
Give this a try :D
CSS:
* { margin: 0; padding: 0; }
html, body {
height: 100%;
text-align: center;
}
body {
background-image: url(../yellow_back.png);
}
#wrap { height: auto;
min-height: 100%;
}
#outer {
text-align: left;
width: 900px;
margin: 0 auto;
background: #fff;
padding-bottom: 100px;
}
#header {
background: transparent url(../images/ac3_circle_header.png) no repeat scroll center top;
height: 200px;
width: 900px;
margin: 0 auto;
}
#sidebar {
float: left;
width: 200px;
}
#main {
float: right;
width: 700px;
}
#footer {
background: transparent url(../images/ab3_circle_footer.png) no repeat scroll left bottom;
clear: both;
height: 100px;
margin: auto;
width: 900px;
position: relative;
margin-top: -100px;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */</div>
</div>
and the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A B and 3</title>
<meta name="Description" content="a b and 3 is dedicated to bringing the baby blanket insustry into a new level of creativity with a dash of minky fabric and a pinch of great modern print." />
<meta name="Keywords" content="baby, blanket, minky, modern, fabric, cooridinating, soft, twins, handmade, hand made, hand-made, custom" />
<link rel="stylesheet" type="text/css" href="css/ab3_sticky.css" />
<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
Home | About | Contact | My Account | Shopping Cart
</div>
<div id="outer">
<div id="sidebar">
<img src="images/ab3_sidebar_blankets.png" alt="" />
Minky
Chenille
<!-- Organic
Pieced Quilts
Custom
-->
<img src="images/ab3_sidebar_gifts.png" alt="" />
Vannah Faire
Shower Bundles
</div>
<div id="main">
<img style="padding-top:25px; padding-left:29px;" src="images/ab3_circle_divider.png" alt="" />
With a shorter #main div, the background color doesn't go to the top of the footer.
<img style="padding-bottom:25px; padding-left:29px;" src="images/ab3_circle_divider.png" alt="" />
</div>
</div>
</div>
<div id="footer">
Copyright © 2010 a * b * and * 3
</div>
</body>
</html>
I’ve left out the irrelevent stuff in the CSS. You can fill in the blanks. I hope this helps.