3 Column Fixed-Width Layout, Header, No Footer

The 3-column fixed-width layout with header makes use of nine divs:

1. #leftbackground. The sole purpose of this div is to provide the background image (in this case, body_bg.gif) for the left side of the #contentarea div. This background will resize itself to the size of the greater of the height of the #leftcolumn, #contentarea, and #rightcolumn divs.
2. #rightbackground. The sole purpose of this div is to provide the background image (in this case, body_bg.gif) for the right side of the #contentarea div. This background will resize itself to the size of the greater of the height of the #leftcolumn, #contentarea, and #rightcolumn divs.
3. #leftcolumn. The left column will house the content (e.g. a left side menu) passed to it from #leftcolumncontent via Javascript (see below).
4. #rightcolumn. The right column will house the content (e.g. a right side menu) passed to it from #rightcolumncontent via Javascript (see below).

5. #contentarea. This is the div that will contain the content of the page. This div is the first div containing content of any type that will appear in the HTML output.
    
   This will serve the dual purpose of providing search engines with a quick and easy way to determine the content of a page, as well as allowing users to view content as soon as possible.
    
   #contentarea is a fluid div, and will expand to the lesser of the available width of the user's browser window (the width of the window minus the width of the #leftcolumn div) or to the width of the content itself.

6. #leftcolumncontent. This is the absolutely positioned menu div, and it contains the menu content intended for #leftcolumn. The content of the #leftcolumncontent div is then placed into the #leftcolumn div by the Javascript to create a true three-column layout. The reason for this substitution is explained below.
7. #rightcolumncontent. This is the absolutely positioned menu div, and it contains the menu content intended for #rightcolumn. The content of the #rightcolumncontent div is then placed into the #rightcolumn div by the Javascript to create a true three-column layout. The reason for this substitution is explained below.
8. #columnsize. This div, although it is not a footer div, accomplishes the same purpose; it indicates the footer/end position of the three columns and their containing divs (#leftbackground and #rightbackground).
9. #header. This div contains the header for the layout. This div can for a main menu, logo, or slogan, among other purposes.

Notes on the Javascript

This layout also incorporates a Javascript (3_column_replace_divs.js). Should the height of the #rightcolumncontent or #leftcolumn div be greater than that of the #contentarea div, the background for each div will flow beyond the boundaries of the #contentarea and containing divs (#leftbackground and #rightbackground) by default, creating two columns of unequal height going down either side of the page. This is due to the fact that absolutely positioned elements are removed from the flow of an HTML document and as such, are either obscured by or overlap other intersecting elements.

For more information, please read The W3C's explanation of Absolute Positioning.

To circumvent this issue, I have written a Javascript that will read the contents of the #leftcolumncontent and #rightcolumncontent divs, move them to the #leftcolumn and #rightcolumn divs respectively, and then clear and remove the #leftcolumncontent and #rightcolumncontent divs from the visible area of the page. This means that, for those users with Javascript enabled, they will see a three-column, scalable layout. And for those users who have Javascript disabled, they will still see a similar layout as long as the height of #rightcolumncontent and #leftcolumncontent do not exceed that of #contentarea.

The only users who are negatively affected are those who have Javascript disabled and are viewing pages where the height of #rightcolumncontent or #leftcolumncontent exceeds that of #contentarea. They will be presented with a page with the default behaviour mentioned above. At the present time, there is no known alternative.

Helpful Hint: When using a fixed-width layout, you may wish to consider creating stylesheets for the print and screen mediums, particularly if your layout is wider than the width of your print media. This is done by using the following code:

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

The CSS

/* This is just here for formatting purposes.  This has nothing to do with the layout. */
@import url(../CSS/defaultstyles.css);

body {
/* Always use margin:  0;  padding:  0; as margin controls for your page itself.  Setting both to 0 ensures that your page will spread to the outer edges of the browser window. */
	margin:  0;
	padding:  0;
}

#leftbackground {
/* replace this value with the height of your header. */
	margin-top:  110px;
	margin-bottom:  0;
	margin-left:  0;
	margin-right:  0;
	padding:  0;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top left repeat-y #FFFFFF;
	color:  #000000;
/*  Replace with your choice of layout width.  */
	width:  770px;
}

#rightbackground {
	margin:  0; 
	padding:  0;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top right repeat-y;
/*  Replace with your choice of layout width.  */
	width:  770px;
	position:  relative;
}

#leftcolumn {
	float:  left;
	width:  200px;
	margin:  0; 
	padding:  0;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top left repeat-y;
}

#rightcolumn {
	float:  right;
	width:  200px;
	margin:  0; 
	padding:  0;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top right repeat-y;
}

#contentarea {
	margin:  0;
/*  Replace with your choice of content area width.  */
	width:  370px;
	background-color:  #FFFFFF;
	color:  #000000;
	height:  1%; /*  IE hack related to float:  left bug.  */
	float:  left;
}
#contentarea[id] {
/* This div is in place to counter the differences in handling the middle column (#contentarea) between Firefox and IE.  IE will ignore this section, whereas Firefox will acknowledge it. */
	float:  none;
	margin-left:  200px;
	margin-right:  200px;
}

#leftcolumncontent {
	position:  absolute;
/* replace this value with the height of your header. */
	top:  110px;
	left:  0;
/* replace with the width of your left column div */
	width:  200px;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top right repeat-y #3F9BCF;
	color:  #FFFFFF;
}

#rightcolumncontent {
	position:  absolute;
/* replace this value with the height of your header. */
	top:  110px;
/* replace with the sum of the widths of your left column and content area divs. */
	left:  570px;
/* replace with the width of your right column div */
	width:  200px;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top right repeat-y #3F9BCF;
	color:  #FFFFFF;
}

#columnsize {
	clear:  both;
/* this is the lowest possible value that will ensure three columns.  Do not lower this value, or your layout will break up. */
	height:  1px; 
	overflow:  hidden;
	border:  none;
	margin:  0; 
	padding:  0;
	background:  transparent;
}

#header {
	position:  absolute;
	top:  0;
	left:  0;
/* The header can be set to either a fixed width or a liquid width.  I prefer to make the header a liquid width for aesthetic purposes, but changing it to a fixed width will not affect the layout.  This is an optional property. */
	width:  100%;
/* replace this value with the height of your header. */
	height:  110px;
/* background for the header.  Replace the URL and the background color (#F2F2F2) with your choices for each.  */
	background:  url(../LayoutImages/top_bg.gif) top left repeat #F2F2F2;
	color:  #FFFFFF;
/* put this in to ensure that your header doesn't overlap the body of your website. */
	overflow:  hidden;
}

The HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Title Tag Here</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Your, keywords, here." />
<meta name="description" content="Your Description Here." />
<link rel="stylesheet" type="text/css" href="/layout_CSS/3_col_fixed_header_no_footer.css" />
</head>
<body>
<div id="bodywrapper">
	<div id="leftcolumn"></div>
	<div id="rightcolumn"></div>
	<div id="contentarea">
		<h1>Your Header Here</h1>
		Your body content here.
	</div>
	<div id="leftcolumncontent">
		Left Side Content
	</div>
	<div id="rightcolumncontent">
		Right Side Content
	</div>
</div>
<div id="header">
	Header Content.
</div>
<div id="columnsize"></div>
<!-- 
<![CDATA[
Javascript to replace the contents of the floating divs (leftcolumn and rightcolumn) with those of the absolutely positioned divs (leftcolumncontent and rightcolumncontent), and clear the absolutely positioned divs.  This will ensure a true three column layout.
You may replace the background URL and color parameters ("images/body_bg.gif" and "#3F9BCF") with the background and background color of your left and right side columns, respectively.  The first two should be left alone, however.
IMPORTANT:  the function must be called after both the two floating columns and the two absolutely positioned columns are loaded, or it will not work. 
]]>
-->
<script type="text/javascript">
<!-- 
replaceDivs ("leftcolumn", "leftcolumncontent", "images/body_bg.gif", "#3F9BCF", "rightcolumn", "rightcolumncontent", "images/body_bg.gif", "#3F9BCF", "leftbackground", "images/body_bg.gif", "rightbackground", "images/body_bg.gif")
-->
</script>
</body>
</html>

The Javascript

// Functions to be used with the 2-column, liquid layout with header and footer or 
// 2-column, fixed-width layout with header and footer at http://www.searchenginefriendlylayouts.com.
// This code may be freely distributed and used in any commercial or non-commercial application, as long as
// these comments are maintained.  All other comments may be removed.

function clearOld (oldDivName) {
	// hides a div and absolutely positions it outside of the viewable area of the page.
	var oldDiv = document.getElementById(oldDivName);
	oldDiv.style.visibility = 'hidden';
	oldDiv.style.overflow = 'hidden';
	oldDiv.style.display = 'none';
	oldDiv.style.top = '-2px';
	oldDiv.style.left = '-2px';
	oldDiv.style.width = '1px';
	oldDiv.style.height = '1px';
}

function replaceDivs(floatLeftDiv, absoluteLeftDiv, floatLeftDivBG, floatLeftDivBGColor, floatrightDiv, absoluterightDiv, floatrightDivBG, floatrightDivBGColor, leftWrapper, leftWrapperBG, rightWrapper, rightWrapperBG) {
	// This function replaces the contents of the floating left div with the contents of the absolutely positioned left div, followed by the same procedure with the corresponding right divs..
	var leftDiv = document.getElementById(floatLeftDiv);
	var oldLeftDiv = document.getElementById(absoluteLeftDiv);
	var leftHTML = oldLeftDiv.innerHTML;
	leftDiv.innerHTML = leftHTML;
	// clear the inner HTML of the absolutely positioned div and hide it to be safe.
	oldLeftDiv.innerHTML = null;
	clearOld (absoluteLeftDiv);
	var rightDiv = document.getElementById(floatrightDiv);
	var oldrightDiv = document.getElementById(absoluterightDiv);
	var rightHTML = oldrightDiv.innerHTML;
	rightDiv.innerHTML = rightHTML;
	// clear the inner HTML of the absolutely positioned div and hide it to be safe.
	oldrightDiv.innerHTML = null;
	clearOld (absoluterightDiv);
}