Centering a div block without the width

Hi, I have a problem when I try to center the div block "products" because I don't know in advance the div width. Anybody have a solution?

Update: The problem I have is I don't know how many products I'll display, I can have 1, 2 or 3 products, I can center them if it was a fixed number as I'd know the width of the parent div, I just don't know how to do it when the content is dynamic.

<style>
    .product_container {
        text-align:    center;
        height:        150px;
    }

    .products {
        height:        140px;
        text-align:    center;
        margin:        0 auto;
        clear:         ccc both; 
    }
    .price {
        margin:        6px 2px;
        width:         137px;
        color:         #666;
        font-size:     14pt;
        font-style:    normal;
        border:        1px solid #CCC;
        background-color:   #EFEFEF;
    }
</style>

<div class="product_container">
    <div class="products" id="products">
       <div id="product_15">
           <img src="/images/ecommerce/card_default.png">
           <div class="price">R$ 0,01</div>
       </div>

       <div id="product_15">
           <img src="/images/ecommerce/card_default.png">
           <div class="price">R$ 0,01</div>
       </div>   

       <div id="product_15">
           <img src="/images/ecommerce/card_default.png">
           <div class="price">R$ 0,01</div>
       </div>
    </div>
</div>

From stackoverflow

• add this css to your product_container class

      margin: 0px auto;
      padding: 0px;
      border:0;
      width: 700px;
  

• By default, div elements are displayed as block elements, so they have 100% width, making centering them meaningless. As suggested by Arief, you must specify a width and you can then use auto when specifying margin in order to center a div.

  Alternatively, you could also force display: inline, but then you'd have something that pretty much behaves like a span instead of a div, so that doesn't make a lot of sense.

• I'm afraid the only way to do this without explicitly specifying the width is to use (gasp) tables.

  Eduardo Molteni : rephrased: If you don't want to spend the next hour trying all kind of combination of CSS, nested DIVs, and browsers, go directly to tables.

• An element with ‘display: block’ (as div is by default) has a width determined by the width of its container. You can't make a block's width dependent on the width of its contents (shrink-to-fit).

  (Except for blocks that are ‘float: left/right’ in CSS 2.1, but that's no use for centering.)

  You could set the ‘display’ property to ‘inline-block’ to turn a block into a shrink-to-fit object that can be controlled by its parent's text-align property, but browser support is spotty. You can mostly get away with it by using hacks (eg. see -moz-inline-stack) if you want to go that way.

  The other way to go is tables. This can be necessary when you have columns whose width really can't be known in advance. I can't really tell what you're trying to do from the example code — there's nothing obvious in there that would need a shrink-to-fit block — but a list of products could possibly be considered tabular.

  [PS. never use ‘pt’ for font sizes on the web. ‘px’ is more reliable if you really need fixed size text, otherwise relative units like ‘%’ are better. And “clear: ccc both” — a typo?]

• Have a look at this article by Stu Nicholls:

  Centering Float Left Menus

• Sounds like the exact problem I had; managed to resolve it with: http://www.cssplay.co.uk/menus/centered.html

• Crappy fix, but it does work...

  CSS:

  #mainContent {
      position:absolute;
      width:600px;
      background:#FFFF99;
  }
  
  #sidebar {
      float:left;
      margin-left:610px;
      max-width:300;
      background:#FFCCCC;
  }
  #sidebar{
  
  
      text-align:center;
  }
  

  HTML:

  <center>
  <table border="0" cellspacing="0">
    <tr>
      <td>
  <div id="mainContent">
  1<br/>
  <br/>
  123<br/>
  123<br/>
  123<br/>
  </div><div id="sidebar"><br/>
  </div></td>
  </tr>
  </table>
  </center>
  

• here a nice workaround for centering a div with no width.

  by the way is tableless

• see this solution

  http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support