up vote 1 down vote favorite
share [g+] share [fb]

I am creating a template for a website.

The example is at Framework Login Page
The main CSS sheet is at: master.css

I am trying to center the main parent div.

I am using

#body {
  width: 100%;
  background: url('pathtoimage.png');
}

#inner_body{
  width: 800px;
  margin: auto;
}

<body>
  <div id="body">
    <div id="inner_body"></div>
  </div>
</body>

What could the issue be?

link|improve this question
HTML/CSS questions are best suited on Doctype – John Conde♦ Jan 22 '11 at 15:12
feedback

closed as off topic by John Conde♦ Jan 22 '11 at 15:12

Questions on Pro Webmasters - Stack Exchange are expected to generally relate to webmastering, within the scope defined in the faq.

1 Answer

up vote 0 down vote

It depends on what browser you're using. Mozilla Firefox will need margin: auto; inside of the CSS (As you have now), but IE is the short-bus-rider that needs special attention...

#body{
 width: 100%;
 background: url('pathtoimage.png');
 **margin: auto;
 text-align: center;**
}

#inner_body{
 width: 800px;
 margin: auto;
}
.
.
.

For internet explorer, you have to add in text-align: center; to your css, and I noticed that you didn't have margin: auto; in the parent element that you wanted to center. Adding the simple attribute align="center" into the tag itself works in most cases.

Hope this helps!

link|improve this answer
feedback

Not the answer you're looking for? Browse other questions tagged or ask your own question.