homepage Welcome to WebmasterWorld Guest from 54.161.214.221
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

    
layout centered
div center layout
naty2009




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

Hi!

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

body {
text-align: center;
}
#ja-wrapper {
text-align:left;
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!
Regards!

 

D_Blackwell




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

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.

likes2burn




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

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.

EG.

#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;
}

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

swa66




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

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.

naty2009




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

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!

Regards

Naty

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