Question

Im creating a website where the header, footer, body are all 100% width of the page, but I need all the content to be centered of the page no matter the resolution. I’ve tried using a wrapper but then the header and stuff are only 100% width of the wrapper and not the page.

Answer 1

I’m going out on a limb and guess that the background color/imagery is 100% wide, but you want the actual content to be centered (with a fixed width?). Here is sample code that uses an internal wrapper div on each item to keep internal content centered. I would recommend doing something totally different and possibly using repeating backgrounds on the html and body elements, but I don’t know what your page looks like.

So.., the following will work, but will alarm HTML purists because of the extra markup 🙂

You can view a (super ugly) example of this method on this sample page I put together.

CSS:

.wrapper {
   width: 960px; /* fixed width */
   margin: 0 auto; /* center */
}

HTML:

<div id="header">
   <div class="wrapper">
   <h1>My Title</h1>
   </div>
</div>
<div id="content">
   <div class="wrapper">
   <h2>Sub Title</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
      do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>
<div id="footer">
   <div class="wrapper">
   <p class="credits">Copyright 2009 by Your Company.com, LLC</p>
   </div>
</div>