The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sticky Footer and Transparent Header Reply To: Sticky Footer and Transparent Header


Give this a try :D


* { 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;
.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>

and the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<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;}
<div id="wrap">
<div id="header">&nbsp;&nbsp;
        Home   |   About   |   Contact   |   My Account   |   Shopping Cart

<div id="outer">

        <div id="sidebar">
            <img src="images/ab3_sidebar_blankets.png" alt="" />


            <!-- Organic

            Pieced Quilts

            <img src="images/ab3_sidebar_gifts.png" alt="" />
            Vannah Faire

            Shower Bundles

        <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 id="footer">

Copyright &copy; 2010 a * b * and * 3


I’ve left out the irrelevent stuff in the CSS. You can fill in the blanks. I hope this helps.