/*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:#fff; color:#000; } /*After that it’s time to give the content area a width and center it horizontally. We do that by specifying the width and margins of the main container, #wrap. We also give it a background colour to make it show up on the page. The method we use to center the content is based on the fact that when an element’s left and right margins are set to auto, they will share whatever is left when the element’s width has been subtracted from that of its container. In this case the width of #wrap will be subtracted from the width of the browser window. 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 { background-image: url("images/coffeebckgr2.jpg"); background-repeat: repeat-y; background-position: center; min-width:750px; } #wrap { background: #bbc3d3; margin:0 auto; width:750px; } /*After that, we give the different sections of the document different background colours to make them show up. */ #header1 h1 { background:#bbc3d3; font-family: Verdana, Arial, Helvetica; font-size: 80%; text-align: right; color: #fff; } #header1 a:link { background:#bbc3d3; font-family: Verdana, Arial, Helvetica; font-size: 80%; color: #fff; } #header1 a:hover { background:#bbc3d3; font-family: Verdana, Arial, Helvetica; font-size: 80%; color: #000; } #header1 a:visited { background:#bbc3d3; font-family: Verdana, Arial, Helvetica; font-size: 80%; color: #fff; } #header { background:#fff; font-family: Verdana, Arial, Helvetica; font-size: small } #navigation { background:#bbc3d3; } #header3 { background:##bbc3d3; font-family: Verdana, Arial, Helvetica; text-align: right; font-size: large; color: #fff; } #main { background:#fff; } #sidebar { background:#bbc3d3; } #footer { background:#bbc3d3; } /*To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns, This will make #sidebar appear to the left of #main, but the footer is not where it should be */ #main { background:#fff; float:right; width:550px; font-family: Verdana, Arial, Helvetica; font-size: small } #sidebar { background:#bbc3d3; float:left; width:200px; font-family: Verdana, Arial, Helvetica; font-size: small } /*The footer doesn’t get pushed down to the bottom of the content because of the way float works. When you float an element, it is removed from the document flow and doesn’t push elements that follow it down. In this case #footer will start right below #main. To avoid this we use the clear property to tell the footer that it can’t have any elements next to it. */ #footer { background:#bbc3d3; clear:both; font-family: Verdana, Arial, Helvetica; font-size: small } /*Now we can see that the shorter column doesn’t continue all the way down to the footer. To make it look like it does, we use the same background colour for #main and #wrap. */ #main{ background:#fff; float:right; width:550px; } #sidebar{ background:#bbc3d3; float:left; width:200px; } /*#nav contains a regular unordered list of links. Since we don’t want it to look like an unordered list we restyle it. */ #navigation a { color: #000; background: #fb0 url("images/left-tab.gif") left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a span { background: url("images/right-tab.gif") right top no-repeat; padding-right: 10px } #navigation a, #navigation a span { display: block; float: left } /* Commented backslash hack hides rule from IE5-Mac \*/ #navigation a, #navigation a span { float: none } /* End IE5-Mac hack */ #navigation a:hover { color: #fff; background: #26a url("images/left-tab-hover.gif") left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a:hover span { background: url("images/right-tab-hover.gif") right top no-repeat; padding-right: 10px } #navigation ul { list-style: none; padding: 0; margin: 0 } #navigation li { float: left; margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica; font-size: small } /*#sidebar contains a regular unordered list of links. Since we don’t want it to look like an unordered list we restyle it. */ #sidebar ul { list-style: none; padding: 0; margin: 0; } #sidebar li { float: left; margin: 0 0.0em; padding: 0; text-align: center } #sidebar li a { background: url(images/background.gif) #fff bottom left repeat-x; height: 2em; line-height: 2em; float: none; width: 19.3em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center; font-family: Verdana, Arial, Helvetica; font-size: small } /* Commented backslash hack hides rule from IE5-Mac \*/ #sidebar li a { float: none } /* End IE5-Mac hack */ #sidebar { width:18em } #sidebar li a:hover { text-decoration: underline } /*Almost done. Time to adjust the margin and padding of some elements to make the layout a little less cramped. */ #header1 h1 { padding:5px; margin:0; } #header h1 { padding:5px; margin:0; } #navigation { background:#fff; padding:16px; } #header1 h3 { padding:5px; margin:0; } #main h2, #main h3, #main p { padding:0 10px; margin: 15px; } #sidebar ul { margin-bottom:0; } #sidebar h3, #sidebar p { padding:0 10px; margin: 0; } #footer p { padding:5px; margin:0; } /*And the final thing is to compensate for a float bug in IE/Win. If you look at step 6, you’ll notice that the footer is not always being pushed completely below #main. Scroll up and down a couple of times if you can’t see it immediately. It is very noticeable in this demo because every major element has a different background colour and everything is really tight. If you have a bit of space between the main content and the sidebar this bug doesn’t occur. Making the main narrower is one way of avoiding it. So let’s do that: */ #main { background:#fff; float:right; width:490px; } #main h3, #main p { padding:0 10px 0 0;