центр 3 div в нижнем колонтитуле с динамическим с?

Question

У меня тут сложная ситуация. я пытаюсь центрировать 3 деления внутри моего нижнего колонтитула, и они должны иметь динамическую ширину, например, минимальную ширину.

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

мои настройки это

<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

Вы должны использовать display: table; и таблица-ячейка.

#container {
    display:table;
}

#first, #second, #third {
    display: table-cell;
    width: 200px;
    height: 40px;
    border: 1px dashed #000;
}

Демоверсия доступна здесь .

Answer 2

установить контейнер для отображения как: table и установить его поле равным 0 auto.

#container {
    display:table;
    margn:0 auto;
    whitespace: nowrap;
}

#first, #second, #third {
    min-width: 200px;
    float:left
    ...
}

Демо: http://jsfiddle.net/AZ4yT/1/

Редактировать: в IE он выравнивается по левому краю.так что вы можете использовать обходной путь для этого

Answer 3

Как насчет использования display: inline-block? Вы можете увидеть jsFiddle здесь:

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