Centering a DIV with CSS
by Dusty at 12:14 pmOne of the biggest questions most people have when switching from the old-school tables way of coding a website, to the more-progressive CSS way of doing things is this: how do I center my website, using just CSS?
The answer is actually quite easy.
Simply add the following code to the main BODY class in your css document. An example would look like this:
BODY { 900px; margin: 0 auto; }
In the above example, you are defining the width of your live area by stating 900px. This width is whatever the width you want your content to be.
The margin: 0 auto clause centers the content wrapper in the browser, centering all your content within it, yet still allowing the text of your divs to be aligned to your specs (left, centered, right, or justified).
Give it a try!
This now works with IE 7 (along with mozila etc..). however if you want the IE6 browser to center the div
#wrapping-centered-div {
text-align: center;
min-width: 600px;
}
#div-centered {
margin:0 auto;
width:600px;
text-align: left;
}
you can also put in min-widths to stop overflow…
July 13th, 2008 at 7:43 amThanks for the feedback, phatrick. That’s a great point. IE6 can be a big pain when putting together sites, so it’s always a great reminder to coders on how to treat this version of the popular browser.
July 13th, 2008 at 10:38 am