shadowline
How do you ... center a box using css and XHTML?
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 :
<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>

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 -->

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.
How do you ... center a box using css and XHTML?
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow