Move Layout from Center to Left

[bumpaw]

I have been studying a demonstration of CSS 3 column layout that has been mentioned here before [positioniseverything.net...] , and I can't figure out how they centered the whole layout. It seems like it would be in

body {
color: #000; 
background: #cce; 
font-family: georgia, "times new roman", sans-serif; 
font-size: 90%; 
font-weight: bold;
text-align: center;
margin: 30px 0;
}

My first guess of text-align: center; dosen't seem to be it.

[RammsteinNicCage]

The first thing to do is look at the html - do they have a div that wraps around everything? Luckily, they were nice and named their wrapping div wrapper. :) So, if you check out the css for .wrapper, you see this:

.wrapper {
margin: 0 auto;
width: 780px;
text-align: left;
background: url(images/pr-background.jpg) repeat-y;
border: 1px solid #000;
}

What centers it is the margin: 0 auto;. That tells it that the top/bottom margin is 0 and the left/right auto centers it.

Jennifer

[bumpaw]

What centers it is the margin: 0 auto;. That tells it that the top/bottom margin is 0 and the left/right auto centers it.

That was one of the first things I tried before my mind went numb in the midnight hour. Today I tried editing that again, but no change occurs. Must be doing something wrong.

[jetboy_70]

If you're using IE5 or 5.5, or if you're using IE6 in quirks mode (i.e. without a correct DOCTYPE specified) then centering with margins will not work. This is a flaw in IE5 and 5.5.

Big John's Piefecta layout uses 'text-align: center;' as a hack to force IE to centre. 'text-align: left;' is used later on to realign the actual text.

[bumpaw]

Big John's Piefecta layout uses 'text-align: center;' as a hack to force IE to centre. 'text-align: left;' is used later on to realign the actual text.

That would be my thinking also, but I can't find a place where adjusting 'text-align' actually brings the whole layout out of the center.:)

[jetboy_70]

Well, removing either the

text-align: center;

in the body declaration or the

margin: 0 auto;

in the .wrapper declaration (as pointed out by RammsteinNicCage) will left align the layout depending on which browser you're viewing the design in.

[bumpaw]

Well, removing either the
text-align: center;

in the body declaration or the

margin: 0 auto;

in the .wrapper declaration

I found that if both were removed it would move left, but not with just one removed. Thanks for the inspiration.:)