The 2-column liquid layout with right side menu is one of the least complex search engine friendly CSS layouts available, as it makes use of just three divs:
#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 #rightcolumn div) or to the width of the content itself.
/* 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 { margin: 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; width: 100%; } #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; } #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; }
<!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_liquid_no_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> </body> </html>