Question

i got a tricky situation here. im trying to center 3 divs inside my footer and they need to have dynamic width, like min-width.

[cotainer           [first]        [second]         [third]         /container]

my setup is this

<footer>
  <div id="container">
     <div id="first"></div>
     <div id="second"></div>
     <div id="third"></div>
  </div>
</footer>

footer #container { width: 800px; margin: 0 auto; }

#container #first,#container #second,#container #third
{
  float: left;
  min-width: 200px;
  height: 25px;
  background: /* image url */
  padding: 4px;
  margin: 0 20px 0 0;
}

#container #third { margin-right: 0; }

Answer 1

What about using display: inline-block? You can see a jsFiddle of it here:

http://jsfiddle.net/S7bKT/1/

HTML

<div id="container">
   <div id="first">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Aliquam scelerisque euismod auctor. Sed pulvinar nulla eu 
      lorem iaculis ultrices. Mauris
   </div>
   <div id="second">Lorem ipsum dolor sit amet</div>
   <div id="third">Sed pulvinar nulla eu lorem iaculis ultrices</div>
</div>

CSS

#container {
   width: 500px;
   background: #dedede;
   margin: 0 auto;
   text-align: center;
}

#first, #second, #third {
    display: inline-block;
    min-width: 50px;
    max-width: 120px;
    min-height: 100px;
    zoom: 1; /* Fix for IE */
    _display: inline; /* Hack for IE */
    margin-right: 20px;
    vertical-align: top;
}

#first {
    background: #f00;
}
#second {
    background: #0f0;
}
#third {
    background: #00f;
}

#container div:last-child {
    margin-right: 0;
}