homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Center page
margin auto and width

Msg#: 4319475 posted 6:05 am on May 30, 2011 (gmt 0)

Hi, I'm trying to center the content on my website.

I've got a test server running the current draft of the website - [mktest123.com...]

I've been searching all over Google and have read through numerous tutorials, and forums with none of the methods working on my website.

I was hoping I could get some help in accomplishing this.



WebmasterWorld Senior Member 10+ Year Member

Msg#: 4319475 posted 7:20 am on May 30, 2011 (gmt 0)

Hi there manu08,

and a warm welcome to these forums. ;)

Apply width:940px; to your #wrapper and .footer rules, then adjust to suit your taste. :)



Msg#: 4319475 posted 8:46 am on Jun 9, 2011 (gmt 0)

I tried that, but then the width is fixed to 940pixels and there is a white background all around the "wrapper".

I want it such that the background colors still flow to the left and right of the centered content, if that makes sense? Similar to how most modern websites are today.


WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4319475 posted 7:05 pm on Jun 9, 2011 (gmt 0)

Take a closer look at the code of those modern websites and you'll find an explicit width declaration. Depending on how the site was constructed, it is either hard-coded into the html and css-- one size fits all-- or built dynamically based on a reading of your own window width (or, worse, total screen width: if you've got a 27" monitor I can jolly well force you to use the whole thing for my page).

Most but not all current browsers will support this format:
div.maintext {margin-left: auto; margin-right: auto; width: 24em;}
(width based on your personal needs) but at least one browser will ignore the "auto" and left-align the whole thing.

For anything beyond centering all text everywhere-- which is trivial but not what you want-- there has to be an explicit width declaration of some kind. That is, you can't simply say "make this part as wide as it needs to be and no wider". There has to be something in ems or pixels. (Not both in the same declaration, or the validator will yap-- for good reason.)

The minimalist version is
div.maintext {margin-left: 10%; margin-right: 10%;}
but this is really only sufficient for text-intensive pages.


WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4319475 posted 1:56 am on Jun 10, 2011 (gmt 0)

@manu08.. that is what happens - you fix the width so the browser knows how much it's got to center. The backgrounds you speak of then need to go on the containing div, body or html elements so that the space is not "white" anymore

the other way is to use a "faux column" kind of background but that still goes on the overall containing element and only makes it look as if the text portion is magically centered, most every site is centered using
margin: 0 auto unless it's a table using the <center> tag.. gasp!

Msg#: 4319475 posted 8:00 pm on Jun 12, 2011 (gmt 0)

For text, set your <div class="content">

TEXT-ALIGN: center
For tables or box

MARGIN: auto;
Usually I use tables to control the look and feel of the page.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 4319475 posted 1:20 am on Jun 13, 2011 (gmt 0)

Or go old school...

<table align="center" cellspacing="0" cellpadding="0" width="400" border="1">
<td align="right" width="400">
table centered, stuff right aligned


<center>stuff is centered</center>

or mix it up...

<div style="width:400px; border:1px solid black;">
<p style="text-align:left;">div is centered, stuff is left</p>

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved