how can you Center your page in CSS

Mar 17th, 2007 | By Rad | Category: CSS, Web site Design, website

The one thing that has bothered me the most about CSS design is the lack of standards. (W3C doesn’t count, or maybe they do!)  I know what your saying “W3C has the standards set!”  This is true, but nobody seems to follow it.  Sure FireFox is just about the best at it, unfortunately too large a percentage of users are in I.E. still.  This presents a problem.  To fix the CSS on your site to work on all browsers, you need to hack this, and hack that, in order for it to work.  The following are a couple of ways to get all browsers to center your content without hacks.

1) Ye old body centering trick.   body {text-align:center} now your all your content is centered.  The draw back to this method I have found, is you have to define a container for the content to be placed in, then re-align everything inside it.

2) the negitive margin trick: #container {position:absolute;left:50%;left-margin:-375px;} this will make a container that is 750px wide and centered.  Draw back….not fluid. set width for this type of setting.

3) auto margin idea:  This one has a lot to say for it.  You can set a site up with this one, and all will be centered.  Liquid designing is posible,  although I haven’t really tried a fixed width design with this one, I am not sure it would work.  I will try it out on one and get back to you on it.

As you can see, my 3 ways of doing this centering thing work, but are not by any means the only way to do it.  I hope they will at least help someone out of a pickel somewhere!

 Shannon Smith has been a graphic designer for almost 20 years.  His love of art and design has lead him to the internet, and website design.

Tampa website Design

CSS Web site Design website

Related links

adelaide web design


Leave Comment

You must be logged in to post a comment.