center 3 divs in footer with dynamic with? - css

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

You should use display: table; and table-cell.
#container {
display:table;
}
#first, #second, #third {
display: table-cell;
width: 200px;
height: 40px;
border: 1px dashed #000;
}
Demo available here.

Answer 2

set container to display as:table and set it's margin to 0 auto.
#container {
display:table;
margn:0 auto;
whitespace: nowrap;
}
#first, #second, #third {
min-width: 200px;
float:left
...
}
Demo: http://jsfiddle.net/AZ4yT/1/
Edit: It gets left aligned in IE. so you might wanna use a workaround for that

Answer 3

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;
}