Advanced Search

Return to Snippet

Revision: 58267
at July 5, 2012 03:06 by cesarkohl
Initial Code 
<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"></div>
</div>


.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}
Initial URL 
http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width
Initial Description 
The idea here is that you contain the content you want to center in two divs, an outer one and an inner one. You float both divs so that their widths automatically shrink to fit your content. Next, you relatively position the outer div with it's right edge in the center of the container. Lastly, you relatively position the inner div the opposite direction by half of its own width (actually the outer div's width, but they are the same). Ultimately that centers the content in whatever container it's in.

Check out the pictures on the website and it'll be clear.

You may need that empty div at the end if you depend on your "product" content to size the height for the "product_container".
Initial Title 
Centering div without width
Initial Tags 
css, center
Initial Language 
CSS