Full-width header, fixed-width, full-height content area

HTML & CSS
1

I’m trying to create a layout that has a full-width header and a fixed-width, centered main content area with 100% height.

The problem is that if I assign height as follows…

html, body  {height:100% }
#header {height: 100px}
#mainContent {min-height:100% }

the height of div#mainContent will equal that of the body – but since it begins beneath the header, it extends 100px beneath the viewport and forces an unecessary scrollbar. I can overcome this problem by absolutely positioning the div#header on top of the div#mainContent but I would rather not do that.

Is there a way to accopmlish this without pushing the main content area beneath the viewport and without using positioning? (also note that I cannot make the main content area part of the background image due to the design requirements).

Can this be done with negative margins? I’ve so far been unsuccessful in my attempts.

Thanks for any suggestions.

2

This helped me get my header full

3

It can be done, e.g. like this :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
html,
body{ margin:0; padding:0; height:100&#37;; min-width:760px; text-align:center}

#header {
	position:relative;  /* give header a stacking higher than mainContent */
	height:100px;
	background: #cff url() center;
}
#mainContent {
	margin:-100px auto 0; /* pull down header */
	width:760px;
	min-height:100%;
	background: #ffc;
}
* html #wrapper{ height:100%}

#content{
	padding:100px 0 50px; /* header and footer space */
}
#footer{
	margin:-50px 0;  /* pull up footer */
	height:50px;
	background: #fcf url() center;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="mainContent">
	<div id="content">Content</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
4

Many thanks Eric. This does the job nicely.

5

I’m curious Eric…is there a particular reason why you chose to use a html 4-strict doctype instead of an xhtml doctype?