/*------------------------------ This is a CSS layout modeled after the "Simple 2 Column CSS Layout" by the 456 Berea Street Group. (http://www.456bereastreet.com) The outermost container is #wrap. From top to bottom within #wrap there is #header (logo), #nav (menu), #main (content), and #footer (miscellaneous). Unlike the Berea version, I dropped the sidebar (second) column from the layout. reference: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ */ /*------------------------------ To make the content reach the edges of the browser window, we set the margin and padding of the body and html elements to zero. We also specify colours for text and background. */ body, html { margin: 0; padding: 0; background: #ccc; color: #003; font-family: sans-serif; } /*------------------------------ To avoid problems that can occur in some browsers when the window is narrower than #wrap We set the element’s min-width to the same value as the width of #wrap. */ body { min-width: 750px; } /*------------------------------ #wrap is the main container for the page content */ #wrap { background: #ff6; margin: 0 auto; width: 750px; border-style: solid; border-color: #ff0; } /*------------------------------ #header is the top-most inner element and only provides a home for the site logo. */ #header { background: #003; text-align: center; /* centers the logo */ } /*------------------------------ #nav is the horizontal bar under the header that provides a home for the navigation menu for the site. */ #nav { background: #ff0; } #nav ul { /* Unformatted list is used to display navigation links */ margin: 0; padding: 5px; list-style: none; } #nav li { /* Inlining the list items makes them display horizontally */ display: inline; margin: 0; padding: 5px; } #nav A:link, #nav A:visited, #nav A:active { text-decoration: none; color: #003; font-weight: bold; } #nav A:hover { text-decoration: underline; } /*------------------------------ #nav is the horizontal section under the header that provides a home for the navigation menu for the site. */ #main { background: #fff; float: left; width: 750px; } #main h2, h3, p { padding:0 10px; } /*------------------------------ #footer is the bottom-most part of #wrap and currently only provides a link back to the home page. Note the use of "clear" to make sure footer appears at the bottom. */ #footer { background: #ff0; clear: both; } #footer p { padding: 5px; margin: 0; }