XHTML and CSS are becoming more and more popular when it comes to designing a webpage. One feature (and this is used by our site) is trying to create a centered div area.
In the css area :
In the body area :
The first id (center_for_ie) is used to control an IE bug. It helps get everything into the center of the page itself.
The second id (content_area) is used to counter-act the IE bug a bit and center the div in the webpage.
In the css area :
<style type="text/css">
#center_for_ie
{
/* this is an IE5 fix. */
width: 100%;
text-align: center;
}
#content_area
{
/* width setting recommended */
width: 400px;
/* align left to fix the previous IE css bug */
text-align: left;
/* zero margin top/bottom, auto margin for left/right */
margin: 0 auto;
border: 1px solid #000;
}
</style>
#center_for_ie
{
/* this is an IE5 fix. */
width: 100%;
text-align: center;
}
#content_area
{
/* width setting recommended */
width: 400px;
/* align left to fix the previous IE css bug */
text-align: left;
/* zero margin top/bottom, auto margin for left/right */
margin: 0 auto;
border: 1px solid #000;
}
</style>
In the body area :
<div id="center_for_ie">
<div id="content_area">
text and images and other stuff here.
</div> <!-- end of content div -->
</div> <!-- end of ieCenter div -->
<div id="content_area">
text and images and other stuff here.
</div> <!-- end of content div -->
</div> <!-- end of ieCenter div -->
The first id (center_for_ie) is used to control an IE bug. It helps get everything into the center of the page itself.
The second id (content_area) is used to counter-act the IE bug a bit and center the div in the webpage.
