Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

layout centered

div center layout



7:48 pm on Dec 1, 2009 (gmt 0)

5+ Year Member


I'm trying to center the layout of a site, I did this on css file

body {
text-align: center;
#ja-wrapper {
margin: 0 auto;

This is working perfect on firefox, safari and Chrome
But is align to left in IE8, I'm not pretty good with css, maybe somebody can help me!


8:13 pm on Dec 1, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I see no problem on it here, but maybe there is not enough information to replicate the problem described.

On #ja-wrapper, {margin: 0 auto;} is probably completely unnecessary with the markup provided. The block level container will automatically be 100% width (less browser default for margin on html, body {

There is no need to center a container that should center by default (taking up 100% available width).?

Perhaps I am misunderstanding the question.


9:43 pm on Dec 1, 2009 (gmt 0)

5+ Year Member

As D_Blackwell has said, you may have to add in a preset width to your #ja-wrapper to notice the auto-fit, but your auto-margins will work.

I think I may know where this problem is coming from though. Do you have a background image on your #ja-wrapper? If you're looking to add an image that wraps around your content you'll have to make two divs. One of which is smaller than the image size for each side.


#ja-wrapper {
margin: 0 auto;
width: 1044px;
background: url(side.png) repeat-y top left; /*the design is that this image is 10px wide for each side.*/

#content {
margin: 0 auto;
width: 1024px;

<div id="ja-wrapper">
<div id="content">

Otherwise what can happen in IE8 is that it will favor the left side and give it a margin (depending on how your code looks).


10:58 pm on Dec 1, 2009 (gmt 0)

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

If you keep legacy IE versions out of quirks mode (use a full doctype with absolutely nothing in front of it) all you need is somethig like

body {
width: 770px;
margin: 0 auto;

You can use other means of setting the width.

Messing with text-align and wrappers is only needed in the legacy IE versions if they are in quirks mode. It is also not going to work in any compliant browser as they do not let blocks elements themselves get affected by text-align (it only should affect inline content)

If you don't somehow set a width, the centering using auto margins will still be done, but the block will take up all available width and use zero margin on both sides.


3:13 pm on Dec 2, 2009 (gmt 0)

5+ Year Member

it's right

I only use
body {
with: 770 px;
margin: 0 auto;
#ja-wrapper {

nothing with text-align, but the page now look centered to left side, sorry but I'm not to expert with this tipic, css.

You really help me a lot, because before the site wasn't aligned on IE and now is aligned. I'm not using any background image.

How can I do now, to put all in the center?

And maybe somebody can copy me the namo of a good book with this topic!




Featured Threads

Hot Threads This Week

Hot Threads This Month