Hi guys, I did a quick search on this and couldn't find any results in the first 2 or 3 pages that answered this question. I am wanting to center align a div wrapper. The alignment works perfectly in every browser except for IE. I have pasted the code that I have in place below: #wrapper { width: 657px; margin: 0 auto 0; } As a said, the div aligns in FF, Safari but not IE. I have done searches on Google and on other forums but I can't find anything that fixes the problem. If you need more info, let me know. Any help would be appreciated. Thanks.
Sorry, but it's not up on a website at all yet. I will copy and paste all the code up here if that is ok with you? As you can see, most of the CSS elements have not been put together yet, as I only started this today and I was stumped when trying to center align the divs in IE. CSS: Web Page: Thank you.
Is your DTD incomplete? Does anything, even comments, precede the DTD? Either will trigger quirks mode in IE, where it does not grok auto margins. cheers, gary
You have a trailing zero that needs to be deleted. #wrapper { width: 657px; margin: 0 auto 0; } Should be... #wrapper { width: 657px; margin: 0 auto; } That should fix it.
Thanks guys for all your efforts but the stuff you guys recommended didn't work, sorry. It still center aligns in FF, Safari and Opera but not in IE - I hate Microsoft, they are so annoying.
Hi To make it work in center apply a bit different but easy technique put <div align="center"> then start #wrapper and where #wrapper ends put </div> It will work I think for IE now. Like follow: <html> <head> <title>Test CSS Page</title> <link rel="stylesheet" href="css/screen.css" media="screen" type="text/css"> </head> <body> <div align="center"> <div id="wrapper"> <div id="header"></div> </div> </div> </body> </html>
You never did answer my questions. If you didn't understand the question, ask for clarification. The use of the <center> tag has been deprecated since 1999, and its use is poor practice. Don't go backwards. There is absolutely nothing wrong with this style rule #wrapper { width: 657px; position:relative; margin:0 auto 0; } Code (markup): It represents best practice for centering the contents of a page. It will not work in IE if there is not a complete and proper DTD to trigger standards mode. cheers, gary
Sorry kk5st, I skipped over your post. You were right, I had code before the DTD - but it is fixed now and all working good - I have got rid of the <center> div alignment tag, I feel like a fool - thanks for your help kk5st.
On #wrapper, try adding this, because this helped my site centralize my template: #wrapper { width: 657px; position:relative; margin-left:auto; margin-right:auto;} PHP: Put auto on both left and right margins.
Not sure if this got mentioned but IE doesn't support auto margins for centering but the workaround is to set body { text-align:center } which centers the wrapper. You would then do #wrapper { text-align:left } to have all text within the wrapper go back to left by default. Hope that helps.