Welcome to WebmasterWorld Guest from 54.197.94.141

Forum Moderators: not2easy

Message Too Old, No Replies

Center page

margin auto and width

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

WebmasterWorld Senior Member 10+ Year Member



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 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.
7:05 pm on Jun 9, 2011 (gmt 0)

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



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 Jun 10, 2011 (gmt 0)

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



@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 Jun 12, 2011 (gmt 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 Jun 13, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>