Forums

markhatter

Hi

For some reason, my website won't align in the center on all browsers. Seems to be an issue is IE and also on IOS browsers
http://poppyandpaige.com/blog/
Any ideas would be most appreciated!

Thanks
Mark

AntonNiklasson

Stop using the center element, it's not semantic. What if you want to change how the site is layed out? Then you'd have to change the markup.

To center an element, you can set both the left and right margins to auto. Like this:

#wrapper {
   margin: 0 auto;
}

In some older versions of IE that won't work though, so you'll have to do it like this:

body {
   text-align: center;
}
#wrapper {
   text-align: left;
}

markhatter

Hi

Thanks for the info. I've tried what you suggested but it's still left aligned on my iPhone.

Is it anything to do with some elements having absolute positioning?

Thanks again
Mark

devsign

What Anton Suggested is indeed correct, however, remember that you must also specify a width on anything you want centred. So just confirm that you do specify a width.

markhatter

Hiya,

Thanks for the comments. I have specified the width but it still doesn't center align!

I think it's something to do with the code in the header section as if I remove the header graphics it aligns correctly!

Thanks
Mark

Paulie_D

It may not be related but you have put the large image as an element rather than applying it as a background.

You have (.bg) class but apparently aren't using it except for positioning.

treehouse : what would you like to learn today?

Forums

Center align entire webpage