I see some designers use a wrapper for their sidebar and content divs for a basic 2 column website. And yet others do not. Are there any hard and fast rules for this?
A wrapper is good for setting a width... those pages where if you have a screen wider than 600 x 800, you see a background colour. A wrapper can also give you another box in which to stick a background image... say you have lots of cute little div boxes and you want cute little rounded corners... okay, there's a bazillion ways to do rounded corners but since the current rule (until CSS3) is that each element gets only one background image, and sometimes you have an effect that takes multiple images-- so a wrapper can be an excuse for that as well. Example of a page with a wrapper (mine : ) : http://stommepoes.jobva.nl/guis2.html I used the wrapper in this case for two things: centering the main bits while setting a set width, and also to move the text back to left (as I have text-align:center for any browsers still out there which use that to center pages instead of margin: 0 auto). Other people use them with the star * for IE-specific commands as well, usually bug-squishing. They are not necessary, though.
I'll use them inside the content DIV, and occasionally inside the sidebar if I'm not going to be having any real nested content. But with me though, my sidebars come after the content in the HTML source (header, menu, content, sidebar/s, footer) and are floated along either side of the content, so it's kinda necessary to do so that way.
I'm not sure if I understand you correctly. Are you referring to your site because you are using faux columns whereby the sidebar is a color different from the content area? If so, then I can understand why there is a need for a wrapper in this case. But I don't see how a wrapper that contains the content and sidebar will determine a width? You can determine a width with content + sidebar = total width. Right?
Something like this: <div id="content"> <div class="wrapper"> page content (the text people read, the main part of the page) </div> </div> <div id="sidebar"> sidebar content </div> Code (markup): Basically what I do is I give #content a 100% width and a left float. Then I'll set the #sidebar's width and float that to the left as well, then use a negative margin in the direction that I want the sidebar to appear. Here's a (rather complicated) example of what I'm talking about. I've released the code into the public domain, so feel free to use it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Three Column Layout with Horizontal Main Menu Site Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="keywords" content="Keywords go here" /> <meta name="description" content="A description of this page goes here." /> <style type="text/css" media="screen,projection"> * { margin:0; padding:0; } html, body { height: 100%; } body { background: #EEE; color: #000; font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif; } #container { min-height:100%; /* squashes an IE 7 bug */ } * html #container { height:100%; /* IE 5.x and 6 treat height as min-height */ } #header { background: #FCF; color: inherit; height: 80px; } #wrapper { float: left; padding-bottom: 32px; width: 100%; } #search-form div { background: #CCC; color: inherit; float: right; height: 2em; } * html #search-form div { position: relative; right: 3px; } #search-form input { float: left; margin: 0.25em; padding: 0 0.4em; } * html #search-form .submit { margin: 1px 0 -1px 0; padding: 0; } *:first-child+html #search-form .submit { margin-top: 1px; padding: 0; } #main-menu { background: #CCC; color: inherit; height: 2em; /* IE Haslayout - fix double margin */ line-height: 2em; list-style: none; } #main-menu li { display: inline; white-space: nowrap; } #main-menu a { background: #0E0; color: inherit; float: left; height: 2em; margin-right: 1px; padding: 0 0.5em; text-decoration: none; } #main-menu a:active, #main-menu a:focus, #main-menu a:hover { background: #FF8; color: #000; } h1 { background: #FFF; clear: both; color: inherit; font-size: 1.75em; line-height: 1.8em; } #content { float: left; margin-bottom: 0.5em; width: 100%; } #content .section { background: #CCF; color: inherit; font-size: 1em; height: 1%; /* triggers hasLayout in IE 5/6; ignored by other browsers due to lack of height definition in #content */ margin: 0 14.5em 0 9.85em; padding: 0.5em; } #content h2 { background: #CCF; border-bottom: 1px solid #000; color: inherit; margin-bottom: 0.2em; padding-bottom: 0.25em; } #sidebar { background: #FFD; color: inherit; float: left; margin: 0 0 0.5em -14em; padding: 0.5em 0; width: 14em; } #sidebar h2 { background: #FFD; border-bottom: 1px solid #000; color: inherit; margin-bottom: 0.2em; padding-bottom: 0.25em; text-align: center; } #sidebar p { padding: 0 0.5em; } #secondary-menu { float: left; list-style: none; margin: 0 0 0.5em -100%; width: 9.75em; } #secondary-menu li { float: left; padding-bottom: 1px; } #secondary-menu a { background: #FCC; color: inherit; display: block; padding: 0.25em 0.5em; text-decoration: none; width: 8.25em; /* IE will mouseover highlight but not let you click link in 'non-text' area unless you set width */ } #secondary-menu a:active, #secondary-menu a:focus, #secondary-menu a:hover { background: #FF0; color: #000; } #footer { background: #8EF; color: inherit; float: left; font: normal 12px/16px tahoma, verdana, arial, helvetica, sans-serif; margin-top: -32px; padding: 8px 0; text-align: center; width: 100%; } </style> </head> <body> <div id="container"> <div id="header"> <img src="#" width="300" height="80" alt="Web Site Title" /> </div> <div id="wrapper"> <form action="#" id="search-form" method="get"> <div> <input type="text" id="search" name="search" size="25" /> <input type="submit" class="submit" value="Search" /> </div> </form> <ul id="main-menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <h1>Top Level Heading</h1> <div id="content"> <div class="section"> <h2>Second Level Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> </div> <div class="section"> <h2>Second Level Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> </div> </div> <div id="sidebar"> <h2>Sidebar Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> </div> <ul id="secondary-menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </div> </div> <div id="footer"> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved. </p> </div> </body> </html> Code (markup):
Yes, you can just set for example content 700px and sidebar 200px and some margins in between and have a total set width of say 940px or something. Because they're in pixels they are set. But how do I center the both of them? I can't give both margin:0 auto... and if I make each side's margin set, then I have to ensure the user's computer screen has a certain width as well, which I can't do : ) But if the both of them are inside another box, a single box, then that box can not only have the width (made up of the content and sidebar amounts) but I can make sure it sits in the middle of the page... like I said though, you need a wide-enough screen to notice. If my site filled your screen completely and you didn't see a grey background, you simply don't have a wide enough screen. If you see the grey, you should see equal amounts of grey on each side. I needed one box around everything to center it like that. Dan's example I actually don't understand (as far as the wrapper goes). Why not: <div id="content"> <p> page content </p> <img /> <p>some blog</p> <p>(the text people read, the main part of the page) </p> </div> <div id="sidebar"> sidebar content </div> [quote="Dan"]Basically what I do is I give #content a 100% width and a left float. Then I'll set the #sidebar's width and float that to the left as well, then use a negative margin in the direction that I want the sidebar to appear.[/quote] I can see the floating, but you need the wrapper to ensure that the content inside #content stays with the float?? Code (markup):
Wrappers also help with cross browser compatibility, with multi-column layouts, a minimum width is very useful but IE6 and under require styling to the wrappers to simulate this property. Besides that, and this is just reiterating, it is more convenient, you can set properties such as padding and/or margin to just the one element.