SiteCrafting Blah Blah Blog
May. 14, 2007 at 8:02am
Centering Content with CSS
It's been quiet on the SiteCrafting blog lately, mostly because we've been very busy making websites for out great clients. I've been swamped for the last two weeks with one project, and I know Kevin, Ken, Reena, and... well, everyone has a full load.
My latest few projects have all been sites that have a defined content width, say 850px, but centered in the browser window. The usual way to accomplish centering with CSS is to make the margins of the content to automatically adjust to the window (margin: 0 auto;). Usually, that happens on the specific areas, so if you have three content areas to center, you either need a container for all of those areas, or set margins three times. The first option has problems with backgrounds, and the second results in more code than is needed.
Over the last week or so, I started using a different system: I have a container for all my different areas, and each area has a div with class of content. The XHTML looks like this:
<div id="area_1">
<div class="content"></div>
</div>
<div id="area_2">
<div class="content"></div>
</div>That lets me set backgrounds on all the divs with ids, and they'll span across the entire window. Then, I set the width and margins in the .content ruleset, and it's ready to go. CSS is great for generalizing rules.
Posted in CSS by Dave Poole
Comments (2)
Kevin says:
Good call -- been doing this myself on a few sites recently. It's can get ugly when a designer has elements overlapping vertically between these horizontal blocks. Nothing some careful negative margins can't handle though. ;)
1 | May. 16, 2007 at 4:44pm
nice, took me a second to think about the application and I could see that on shadows and such along the sides of sites. What I tend to do when a client wants a background/shadow to go 100% height is apply the background graphic on the body tag.
ie.
body {
background-image:url(bg_sliver.jpg);
background-position:center;
background-color:#FFFFFF;
background-repeat:repeat-x;
}
div#content_container {
width: 800px;
margin: 0px auto;
}
2 | Left by Michael Pierce | May. 17, 2007 at 3:11pm