2 Column Fixed Width Layout, Right Side Menu, Header, Footer

The 2-column fixed-width layout with right side menu, header and footer has six divs:

1. #bodywrapper. The sole purpose of this div is to provide the background image (in this case, body_bg.gif) for the #contentarea div. Should the height of the #contentarea div be greater than that of the #rightcolumn (menu) div, then the background will tile accordingly.
2. #rightcolumn. This is the floating menu div, but initially contains no content. The content is supplied by the Javascript.

3. #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.

4. #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 two-column layout. The reason for this substitution is explained below.
5. #header. This is the header div. It could be used for a menu, banner advertising, or any other purpose you see fit.
    
   The #header div is absolutely positioned in order to allow for placement at any point in the document.
6. #footer. This is the footer div. It can be used for copyright notices, for less important links (e.g. legal/disclaimer links), for another version of the main menu, or any other purpose that you like.
    
   The footer can be either fixed or liquid in width. This will not affect the overall layout. Personally, I prefer liquid footers because I find them more attractive as a general rule of thumb, but play with this and see what works best for you.

Notes on the Javascript

This layout also incorporates a Javascript (2_column_replace_divs.js). Should the height of the #rightcolumncontent div be greater than that of the #contentarea div, it will flow over into the #footer div by default. 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 (e.g. the #footer div).

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 #rightcolumncontent div, move them to the #rightcolumn div, and then clear and remove the #rightcolumncontent div from the visible area of the page. This means that, for those users with Javascript enabled, they will see a two-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 does 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 exceeds that of #contentarea. 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(https://searchenginefriendlylayouts.com/wp-content/themes/1cxt1iauxdb3qr75671ky145684/files/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;
}
#bodywrapper {
/* replace margin-top value with the height of your header. */
	margin-top:  110px;
	margin-left:  0;
	margin-right:  0;
	margin-bottom:  0;
	padding:  0;
/* Replace width value with your choice of layout width. */
	width:  770px;
/*  Background of the left side menu.  Replace the URL and the background color (#FFFFFF) with your choices for each.)  */
	background:  url(../LayoutImages/body_bg.gif) top right repeat-y #FFFFFF;
	color:  #000000;
}
#contentarea {
 /* replace this value with the width of your left column */
	margin:  0;
	padding:  0;
	float:  left;
	height:  1%;  /* IE hack due to a bug handling float:  right. */
	width:  570px;
}
#contentarea[id] {
/* Put in place for Firefox, and any browser that will render this section correctly.  IE has a bug involving float:  none. */
	float:  none;
	margin-right:  200px;
}
#rightcolumn {
	float:  right;
	width:  200px;
}
#rightcolumncontent {
	position:  absolute;
/* replace top value with the height of your header. */
	top:  110px;
	right:  0;
/*  Background of the right side menu.  Replace the URL and the background color (#3F9BCF) with your choices for each.)  */
	background:  url(../LayoutImages/body_bg.gif) top right repeat-y #3F9BCF;
	color:  #FFFFFF;
	margin:  0;
	padding:  0;
/* Replace width with the width of your right column. */
	width:  200px;
}
#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:  #000000;
/* put this in to ensure that your header doesn't overlap the body of your website. */
	overflow:  hidden;
}
#footer {
/* This is needed to ensure that the footer appears below your content and menus. */
	clear:  both;
	margin:  0;
	padding:  0;
/* The footer can be set to either a fixed width or a liquid width.  This is an optional property. */
	width:  770px;
/* Replace with the height of your footer.  Optional.  */
	height:  20px;
/* Replace with the background image and colour of your footer.  */
	background:  url(../LayoutImages/body_bg.gif) #3F9BCF;
	color:  #FFFFFF;
}

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/2_col_right_side_menu_fixed_header_footer.css" />
<!--
<![CDATA[
Javascript to replace the contents of the floating div with those of the absolutely positioned div, and clear the absolutely positioned div.  This will ensure a true two column layout.
To ensure that the script works, place the call to the script between the <head> and </head> tags of your document.
]]>
-->
<script type="text/javascript" src="layout_scripts/2_column_replace_divs.js">
<!-- 
//-->
</script>
</head>
<body>
<div id="bodywrapper">
	<div id="rightcolumn"></div>
	<div id="contentarea">
		<h1>Your Header Here</h1>
		Your body content here.
	</div>
</div>
<div id="rightcolumncontent">
	Right Side Content
</div>
<!-- 
<![CDATA[
Javascript function to replace the contents of the floating div (rightcolumn) with those of the absolutely positioned div (rightcolumncontent), and clear the absolutely positioned div.  This will ensure a true two column layout. 
You may replace the last two parameters ("images/body_bg.gif" and "#3F9BCF") with the background and background color of your right side column, respectively.  The first two should be left alone, however.
IMPORTANT:  the function must be called after both the two floating columns and the absolutely positioned column are loaded, or it will not work. 
]]>
-->
<script type="text/javascript">
<!-- 
replaceDivs ("rightcolumn", "rightcolumncontent", "images/body_bg.gif", "#3F9BCF")
-->
</script>
<div id="header">
	Header Content.
</div>
<div id="footer">
	Footer Content
</div>
</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 (absoluteDivName) {
	// hides a div and absolutely positions it outside of the viewable area of the page.
	var absoluteDiv = document.getElementById(absoluteDivName);
	absoluteDiv.style.visibility = 'hidden';
	absoluteDiv.style.overflow = 'hidden';
	absoluteDiv.style.display = 'none';
	absoluteDiv.style.top = '-2px';
	absoluteDiv.style.left = '-2px';
	absoluteDiv.style.width = '1px';
	absoluteDiv.style.height = '1px';
}
function replaceDivs(floatDivId, absoluteDivId, floatDivIdBG, floatDivIdBGColor) {
	// This function replaces the contents of the floating div with the contents of the absolutely positioned div.
	var floatDiv = document.getElementById(floatDivId);
	var absoluteDiv = document.getElementById(absoluteDivId);
	var leftHTML = absoluteDiv.innerHTML;
	floatDiv.innerHTML = leftHTML;
	// clear the inner HTML of the absolutely positioned div and hide it to be safe.
	absoluteDiv.innerHTML = null;
	clearOld (absoluteDivId);
	// assign background and background color to the floating div.
	var bgStyle = 'url( + floatDivIdBG + ) top left repeat-y ' + floatDivIdBGColor;
	floatDiv.style.background = bgStyle;
}