Hey guys,

Im having problems with my div containter. I wish it to be centered on both FireFox and IE6+. The container displys the divs to the left and I wanted it centered like the banner.

CSS (http://onciuhosts.biz/test/main.css)

Site (http://onciuhosts.biz/test/)

Thnx in advanced.

Change container's position:fixed; to position:relative; also you probably need to center the text of body for it to work in IE.

Its not working, it makes the main text body expand to the sides but the nav stays in the same spot.

link (www.guildsofwarcraft.net)

I see, that's because your navigation width:100%; stretches container aswell.

Try specifying width to mainbody and making it's margin:auto;

However your navigation is trickier since it uses floats, at the moment I don't have a solution for this :(

does this help?
http://bluerobot.com/web/css/center1.html

Thanks so much. It works =)

One other thing. If you look at the site in IE and FireFox the width of the news div is off. I tried setting it to 579px and 56.89em but they dont seem to match each other. Is there a way to fix this?

Maybe width: 569px;?
Because the whole width of the div is width + padding + border.

Any padding you have on the sides will affect the width differently... one will add the padding on to the width (500px with 5px padding becomes 510px wide) and the other will include the padding in the width. There may be some CSS-type hacks that fix it, unfortunately I don't know of any though

Any padding you have on the sides will affect the width differently... one will add the padding on to the width (500px with 5px padding becomes 510px wide) and the other will include the padding in the width. There may be some CSS-type hacks that fix it, unfortunately I don't know of any though
Isn't that the case in quirks mode? So if one adds document type declaration it will display the same in different browsers?

ok thnx, ill try looking around.

nvm, a friend found it out for me.


you addd:


* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}


so your widths/padding/borders look the same in all browsers

nvm, a friend found it out for me.


you addd:


* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}


so your widths/padding/borders look the same in all browsers

Isn't that the case in quirks mode? So if one adds document type declaration it will display the same in different browsers?

I have no idea, although I think I've had a problem both with and without a doctype...
And thanks for posting the solution you found donnerschlag, I'm definitely going to save that one

np, and now my site is coming along smoothly =)