Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

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

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

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

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!

share|improve this answer
add comment

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