/    Sign up×
Community /Pin to ProfileBookmark

Centered body using margins, NOT showing in IE

Copy linkTweet thisAlerts:
Aug 23.2007

Hi! I am trying to center the body of my website, and I did this using css:

.centered{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width:70%;
margin: auto;
}

Apparently margin: auto; doesn’t work in IE…what are some fixes, because it looks great in both Firefox (mac/pc) and Safari!! Please help…

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriAug 23.2007 — Of course auto side margins won't work in that example - absolute positioning takes the div out of the normal document flow, and you have specified the positioning using the top, right, bottom and left properties (IE won't stretch like that anyway).

If this is a wrapper around the site, there is no need for absolute positioning (there is no need for this in probably 90% of the cases it is used) :[CODE].centered {
width: 70%;
margin: 0 auto;
} [/CODE]
Copy linkTweet thisAlerts:
@IxianAug 23.2007 — This works depending on how far back you have to support IE. I've gotta support back to IE 5 where I work and this doesn't quite work in 5. It works in 6 and 7 so if that's all you're looking at go for it. It's better, easier, and simpler than what I get to do to center elements.

In my own practice I've generally had to make the parent element have text-align:center; to make IE center things then have the child element return the text-alignment to whatever it really should be. Not really what I'd like to do, but I can't recall any site I've made that actually centered in all the versions of IE I have to support without this kludge of a fix.
Copy linkTweet thisAlerts:
@erikanorrisauthorAug 23.2007 — Unfortunately this only centers my header...I need it to center everything on the page....:eek:
Copy linkTweet thisAlerts:
@CentauriAug 23.2007 — Maybe we need a link to the site, or at least the full code posted...
Copy linkTweet thisAlerts:
@erikanorrisauthorAug 23.2007 — the site is here:

www.erikanorris.com/dev/tearitup/home.html


I am trying to center everything...I got a semi-fix (which is not online):

html, body{

background-color: #000000;

text-align:center;

margin:0;

}

.centered{

position:absolute;

width:70%;

margin:0 auto;

}


However then the problem is that all the elements are way to the right and half-way off the screen!

Thanks so much for your help!

Disclaimer: the design is HORRIFIC...If it had been up to me it would have been much different.
Copy linkTweet thisAlerts:
@CentauriAug 23.2007 — The biggest problem is all the absolute positioning, but that would take a bit of work to fix, same for the table layout....

Absolute positioning co-ordinates are referenced to the nearest positioned parent, which in this case is the screen edge. Even if the wrapper is set to use auto margins, the contents are still referencing the screen edge. Setting a relative position on the wrapper will ensure that all absolutely positioned contents are positioned reletive to the wrapper :[CODE].centered{
[COLOR="Red"]position: relative;[/COLOR]
width:70%;
margin: 0 auto;
} [/CODE]
×

Success!

Help @erikanorris spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...