Parent element not in center

Question

My Html markup

<div id="main-wrapper">

            <div id="header-wrapper">
                <div id="header">
                                    </div><!--end of #header -->
                <div class="clear"></div>
            </div><!--end of #header-wrapper -->

            <div id="content-wrapper"><!-- this is closed in footer.php -->    <!-- main image with its map -->
    <img usemap="#homemap" class="map" src="http://rtcamp.com/wp-content/themes/rtcamp-new/img/home-main.png"&gt;

            <div class="clear"></div> <!--clear any float present at this point -->
        </div><!-- End of #content-wrapper -->

        <div id="footer-wrapper">

        </div><!--End of #footer-wrapper-->         
    </div>

Used CSS

body.view-home #main-wrapper {
height:100%;
}

#main-wrapper {
margin:0 auto;
width:960px;


}

body.view-home #header-wrapper {
height:auto !important;
margin:0 auto -555px;
min-height:100%;
}


body.view-home #content-wrapper {
display:block;
height:555px;
margin:0 auto;
overflow:hidden;
position:relative;
width:980px;
}

In all browsers like firefox,chrome the main-wrapper div appears center in browsers but in IE7 the main-wrapper not appears in the center. It appears left side in the browser.

Please help me.

Answer 1

Try these styles:

body {
  text-align:center;
}

#main-wrapper {
  margin:0 auto;
  width:960px;
  text-align:left;
}