2 Column Fixed Width Layout, Right Side Menu, Header, No Footer
The fixed-width 2 column layout with right side menu and header uses four divs:
- #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.
#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.- #rightcolumn. This is the menu div. #rightcolumn, like #bodywrapper, contains the background image (body_bg.gif). If the height of the #rightcolumn div should be greater than that of the #contentarea div, then the background image will tile accordingly.
- #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.
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; /* Background of the right 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; position: relative; top: 0; left: 0; /* Replace width value with your choice of layout width. */ width: 770px; } #contentarea { /* replace this value with the width of your right column */ margin-right: 200px; margin-left: 0; margin-bottom: 0; margin-top: 0; padding: 0; /* Replace width value with your choice of content area width. */ width: 570px; } #rightcolumn { position: absolute; top: 0; right: 0; margin: 0; padding: 0; /* Replace width with the width of your right column. */ width: 200px; /* 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; } #header { position: absolute; top: 0; left: 0; 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; }
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_no_footer.css" /> </head> <body> <div id="bodywrapper"> <div id="contentarea"> <h1>Your Header Here</h1> Your body content here. </div> <div id="rightcolumn"> Right Side Content </div> </div> <div id="header"> Header Content. </div> </body> </html>
