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 class="clear"></div>

.outer-center {
    float: right;
    right: 50%;
    position: relative;
.inner-center {
    float: right;
    right: -50%;
    position: relative;
.clear {
    clear: both;

Initial URL

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