Forums

iamaw

Hi...

Im still fairly new to all of this and I have been lurking around CSS-Tricks for a while now. I was playing around, creating a new layout for one of my sites...

Here is what I have at the moment:

HTML:


<!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 rel=\"stylesheet\" href=\"style.css\" type=\"text/css\">
</head>

<body>


<div id=\"mainContainer\">


	<div id=\"header\">

		<div id=\"headerLeft\">
			<p>headerLeft</p>
		</div>

		<div id=\"headerRight\">
			<p>headerRight</p>
		</div>

		<div id=\"clearLeft\"></div>

	</div>
    

	<div id=\"contentContainer\">

		<div id=\"contentLeft\">
			<p>contentLeft</p>
		</div>

		<div id=\"contentRight\">
			<p>contentRight</p>
		</div>

		<div id=\"clear\"></div>

	</div>
    
    
    <div id=\"footer\">
    
    	<div id=\"footerLeft\">
        	<p>footerLeft</p>
        </div>
        
        <div id=\"footerRight\">
        	<p>footerRight</p>
        </div>
        
        <div id=\"clear\"></div>
    
    </div>

</div>

</body>
</html>

CSS:


@charset \"utf-8\";
/* CSS Document */

body{
font-family:Arial, Helvetica, sans-serif;
background:#b1d784;
}

* {
margin: 0;
padding: 0;
}

#mainContainer{

}

#header{
width:100%;
height:30px;
border-bottom:1px dotted black;
background:#91c948;
}

#headerLeft{
width:249px;
height:30px;
border-right:1px dotted black;
background:#91c948;
float:left;
}

#headerRight{
height:30px;
background:#91c948;
float:left;
}

#clearLeft{
clear:left;
}

#contentContainer{
width:800px;
}

#contentLeft{
width:249px;
height:500px; /* temp */
border-right:1px dotted black;
float:left;
}

#contentRight{
width:550px;
height:500px; /* temp */
float:right;
}

#clear{
clear:both;
}

#footer{
width:100%;
height:100px;
border-top:1px dotted black;
background:#91c948;
}

#footerLeft{
width:249px;
height:100px;
border-right:1px dotted black;
background:#91c948;
float:left;
}

#footerRight{
height:100px;
width:550px;
background:#91c948;
float:left;
}

What is the best way to make my footer stick to the bottom of the page no matter what size the user's browser window is? Currently it stays put and leaves an empty gap below it. (see the screenshot) Im sure there is a simple way to do it, I just have no clue and would love to learn how :). Hopefully it is possible with the ways I worked my CSS. Thanks in advanced!

http://farm4.static.flickr.com/3271/2633287270_fc39a9356e_o.gif

Argeaux

check this out:

http://ryanfait.com/sticky-footer/

iamaw

Awesome, thanks for that link. It worked for the most part, but I think I have some tweaking to do due to my sloppy CSS code.

treehouse : what would you like to learn today?

Forums

Footer Problem