Welcome to WebmasterWorld Guest from 54.161.110.184

Forum Moderators: not2easy

Message Too Old, No Replies

Center page

margin auto and width

     
6:05 am on May 30, 2011 (gmt 0)

New User

5+ Year Member

joined:May 30, 2011
posts: 2
votes: 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.
7:20 am on May 30, 2011 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 970
votes: 23


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. :)

birdbrain
8:46 am on June 9, 2011 (gmt 0)

New User

5+ Year Member

joined:May 30, 2011
posts: 2
votes: 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.
7:05 pm on June 9, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13201
votes: 345


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.
1:56 am on June 10, 2011 (gmt 0)

Senior Member

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

joined:Oct 1, 2002
posts:5199
votes: 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!
8:00 pm on June 12, 2011 (gmt 0)

New User

5+ Year Member

joined:June 12, 2011
posts:2
votes: 0


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

DIV.content{
TEXT-ALIGN: center
}
For tables or box

TABLE.XXHH{
MARGIN: auto;
}
Usually I use tables to control the look and feel of the page.
1:20 am on June 13, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 16, 2004
posts:1341
votes: 0


Or go old school...

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

or

<center>stuff is centered</center>

or mix it up...

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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members