Floated parent only extended by content floated divs

Question

I have some divs holidng images I want to display. They are within a centered container. This container has a variable width so depending on your browser size you have either 3 or 4 images in a row before they go flow into the next row. I want to have thoses images centered in the container elment. My problem now is, that this container element is always 100% so but the inside image divs do not fill it. I need the inner divs to expand the out div, so it is only as wide as all the 3 or 4 images and their margin.

My html is:

<div id='team'>
  <div class='item-container'>
    <div class='item'>
      <img src='small.jpg' alt='' />
    </div>
  </div>

  <div class='item-container'>
    <div class='item'>
      <img src='small.jpg' alt='' />
    </div>
  </div>
</div>

My css is:

#team{
  margin: 20px 0px;
  padding: 20px 0;
  position: relative;
  float: left;
}
#team .item-container{
  position: relative;   
  float: left;
  width: 230px;
  height: 180px;    
  margin: 2%;
}

Anyone any ideas? If you do not get what I mean, please ask so I can describe it in more detail. Thanks in advance.

Answer 1

You can switch to using display: inline-block instead of float: left on the .item s, and then text-align: center on #team to center:

See: http://jsfiddle.net/gGc76/8/ - (be sure to try resizing the window)

You possibly don't want float: left on #team , but I'm not sure what you're doing.

#team {
    margin: 20px 0;
    padding: 20px 0;

    position: relative;
    float: left;
    background: #ccc;

    text-align: center
}
#team .item-container {
    vertical-align: top;
    display: inline-block;
    /* if you need ie7 support */
    *display: inline;
    zoom: 1;

    position: relative;   
    width: 230px;
    height: 180px;    
    margin: 2%;
    background: #eee
}