100% Height CSS Layout w/ Footer

Yui • Posted 2:03AM on July 3, 2007 (4 Comments)

I have a tendency to make designs that are meant to stretch from the very top of the bowser window to the very bottom. The problem is that, especially in very large browser resolutions, sometimes there isn’t enough content to force the layout to either completely fill all of the vertical space in the viewport, or to scroll vertically, leaving a margin between the bottom of the layout and the bottom of the browser window. I’ve finally, I believe, solved the problem, and since I haven’t seen anyone else using this method, I decided to make a tutorial. The method is an extension of this example layout and relies on the principles of min-height, absolute/relative positioning, and z-index. This is the method I’ve used to code the current LastSong.net layout (Waste, featuring UnsraW).

Download: Example Files

Feel free to download and edit these files however you like. If you use this code, please leave the credits at the top of stylesheet intact.

Notes:

In all of the following code, italicized text indicates hacks that allow for cross-browser compatibility, which may be omitted if you’re only dealing with standards-compliant browsers.
Numbers like /*1*/ in CSS code reference footnotes. They are designed in this way as to not interfere with the CSS code if you copy/paste it into your own document.
You may want to copy code into a program, like Notepad++, that does syntax highlighting, in order to understand the code more easily.

Basics

We’ll begin by slicing the layout, as well as cropping the following images to make the tiling backgrounds:

Actual sizes of images may have been reduced for faster loading.

In addition to these, I also made a 780px × 1px image named bg_back.jpg, which will serve as the vertically tiling background for the content and sidebar. Note that bg_main.jpg and bg_sidebar.jpg are continuations of the header where the top of the text overlaps.

First of all, CSS inheritance dictates that when you give an object, such as the height of a div, a percentage value, it calculates this percentage based on the height of its parent. Thus, in order to have a 100% height layout, we must begin our stylesheet with the following:

html, body {
	width: 100%;
	height: 100%;
}

Next, I generally like to put the horizontally repeating top background as the body background. You should also specify that there should be no margin and no padding, so that there will be no white space between your layout and the edge of the browser viewport:

body {
	background: #54525D url('bg_top.jpg') repeat-x top left;
	margin: 0;
	padding: 0;
}

The way we get the footer to stick to the bottom of the browser window at all times, no matter the amount of content filling the page, is by using absolute positioning to position it at the bottom of a parent div (in this case, #back) whose min-height is set to 100%:

#back {
	background: url('bg_back.jpg') repeat-y top left;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative; /*1*/
}                                        

#footer {
	background: url(’footer.jpg’) no-repeat;
	width: 780px;
	height: 291px;
	position: absolute;
	left: 0;
	bottom: 0;
}

position: relative; - This allows for elements within #back to be absolutely positioned with reference to #back.

Finally, the #header, #main, and #sidebar can be positioned using normal flow and floats inside a #container div set to be the width of your main layout:

#container {
	width: 780px;
}                                        

#header {
	background: url('header.jpg') no-repeat;
	width: 780px;
	height: 353px;
}                                        

#main {
	background: url('bg_main.jpg') no-repeat top left;
	float: left;
	clear: left;
	width: 450px;
	min-height: 250px; /*1*/
	height: auto !important;
	height: 250px;
	padding: 75px 10px 291px 123px; /*2*/
}                                        

#sidebar {
	background: url(’bg_side.jpg’) no-repeat top left;
	float: right;
	clear: right;
	width: 177px;
	padding: 10px 10px 291px 10px; /*2*/
}

min-height - You may want to add an appropriate min-height in either #main or #sidebar so that your bg_main.jpg and bg_side.jpg backgrounds don’t get cut off prematurely when there’s little content.
padding - Top, left, and right paddings should be adjusted such that the layout looks correct, and content appears in the right place. Bottom padding should, for now, be at least equal to the height of the footer image so that content is not covered up by the footer image.

The #main and #sidebar floats must be cleared using a #clear div so that #back will expand vertically to include them.

#clear {
	clear: both;
}

Let’s see what the HTML looks like up to this point:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">   

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="back">
	<div id="container">
		<div id="header">
		<div id="main">
		<!-- MAIN CONTENT -->
		</div>
		<div id="sidebar">
		<!-- SIDEBAR CONTENT -->
		</div>
		<div id="clear"></div>
	</div>
	<div id="footer"></div>
</div>
</body>
</div>
</body>
</html>

Note that it’s vitally important for you to include a DOCTYPE declaration at the very begining of your HTML document to activate standards mode in IE, or else your layout will break. Check here for advice on how to choose a DOCTYPE. HTML 4.01 Transitional and HTML 4.01 Strict are probably best for beginners. The XHTML DOCTYPEs will also work, if you want to write your site in XHTML. HTML 3.2 Final and earlier will not activate standards mode and, therefore, will not work.

Using Z-Index

While this is a great start, you may notice that it lacks many of the bells and whistles of the current LastSong.net layout. For instance, you may notice that in addition to a horizontally tiling top background, I also have a horizontally tiling bottom background. Not only that, but the bottom of my main content overlaps with the top of the footer image! In achieving these features, the z-index attribute of CSS becomes important.

First, let’s start with the bottom tiling background. This is achieved by creating a #bottom div inside #back whose width is 100% and whose height is the height of the background tile, absolutely positioned to be at the very bottom of #back:

#bottom {
	background: url('bg_bottom.jpg') repeat-x bottom left;
	width: 100%;
	height: 146px;
	position: absolute;
	left: 0;
	bottom: 0;
}

You may notice now that, depending on where you place the #bottom div within #container, that the repeating background may cover up #footer. This problem can be fixed by adding a z-index value to #footer that’s larger than that for #bottom. Since we didn’t define a z-index for #bottom, its z-index defaults to 0. Thus, we must set that of #footer to greater than 0:

#footer {
	background: url('footer.jpg') no-repeat;
	width: 780px;
	height: 291px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
}

To have the bottom of the content of either #main or #sidebar to overlap with the top of the footer, you must change their respective bottom padding values accordingly. However, you’ll notice that if you make these padding values smaller than the height of the footer, the content will disappear behind #footer. The solution is to set the z-index of these divs to be greater than that of #footer:

#main {
	background: url('bg_main.jpg') no-repeat top left;
	float: left;
	clear: left;
	width: 450px;
	min-height: 250px;
	height: auto !important;
	height: 250px;
	padding: 75px 10px 185px 123px;
	position: relative; /*1*/
	z-index: 2;
}                                        

#sidebar {
	background: url(’bg_side.jpg’) no-repeat top left;
	float: right;
	clear: right;
	width: 177px;
	padding: 10px 10px 156px 10px;
	position: relative; /*1*/
	z-index: 2;
}

position: relative; - The z-index attribute only works for elements that have a position attribute. Even though we aren’t positioning #main and #sidebar outside of floating them, nor do we want to position anything inside them, adding this allows us to assign them z-index values.

Let’s look at the HTML again, with these added changes:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">   

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="back">
	<div id="container">
		<div id="main">
		<!-- MAIN CONTENT -->
		</div>
		<div id="sidebar">
		<!-- SIDEBAR CONTENT -->
		</div>
		<div id="clear"></div>
	</div>
	<div id=”bottom”></div>
	<div id=”footer”></div>
</div>
</body>
</div>
</body>
</html>

Centered Layouts

It’s easy enough to image how this code can be adapted for a right-aligned layout, so I won’t go into it here unless I receive an overwhelming request to do so. It is, however, less obvious to see how this method can be used for a centered layout. Here are the alterations you need to make. Note that the HTML and any unmentioned divs can stay the same:

body {
	background: #54525D url('bg_top.jpg') repeat-x top center;
	margin: 0;
	padding: 0;
}                                        

#back {
	background: url(’bg_back.jpg’) repeat-y top center;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	text-align: center;
}                                        

#container {
	width: 780px;
	margin: 0 auto 0 auto;
}                                        

#bottom {
	background: url(’bg_bottom.jpg’) repeat-x bottom center;
	width: 100%;
	height: 146px;
	position: absolute;
	left: 0;
	bottom: 0;
}                                        

#footer {
	background: url(’footer.jpg’) no-repeat;
	width: 780px;
	height: 291px;
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -390px; /*1*/
	z-index: 1;
}

margin-left: -390px; - The margin-left value for #footer must be negative half the with of the footer. For example, my footer was 780px wide. Half of that is 390px, so I used -390px.

So far, I have personally tested this code in IE6, IE7, Firefox 2, and Opera 9. Please check compatibility with other browsers and let me know– your help will be greatly appreciated.

Comments: 4 Comments
Tags: HTML/CSS, Tips and Tricks

« Previous || Next »

Comments

Mija

Posed 8:15PM on July 4, 2007 (Homepage)

This is so cool!~~!

L

Posed 7:56PM on July 20, 2007 (Homepage)

I tried doing this code with my own layout, I wanted to ask if I needed all the codes even if I may not need them? I tried previewing it all but it came out in text. Could you possibly help, please?

laurs

Posed 7:10PM on April 3, 2008 (Homepage)

thanks. your site helped me solve my layout problems.

Kaytie

Posed 5:36PM on May 3, 2008 (Homepage)

I am using containers and I am using a simple background color for my container but for some odd reason the background color won’t extend 100% of the page. No matter what I do I can’t get my background color to extend all the way with the container. help please?

Name (required):
Email (required):	[not displayed]
Site URL:

Lastsong.net

100% Height CSS Layout w/ Footer

Basics

Using Z-Index

Centered Layouts

Comments

Mija

L

laurs

Kaytie

Comment Form

Welcome

Site

Blog

Entry Tags