Jak zmienić rozmiar automatycznego nadrzędnego elementu div na szerokość jego podrzędnych elementów div

Staram się, aby nadrzędny element DIV był tylko tak szeroki, jak podrzędny element DIV. Automatyczna szerokość powoduje, że nadrzędny element DIV dopasowuje się do całego ekranu. Elementy div podrzędne będą miały różne szerokości w zależności od ich zawartości, więc potrzebuję, aby element nadrzędny został odpowiednio dostosowany.

<div style='width:auto;'>
  <div style="width: 135px; float: left;">
    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>

    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>
  </div>

  <div style="width: 135px; float: right;">
    <h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
      <dd style="white-space: nowrap;">3</dd>
    </dl>
  </div>
</div>

Twoje <div>elementy wewnętrzne prawdopodobnie powinny być float:left. Rozmiar elementów DIV do 100% rozmiaru ich kontenera automatycznie. Spróbuj użyć display:inline-blockzamiast width:autow kontenerze div. Lub ewentualnie float:leftpojemnik i również zastosuj overflow:auto. Zależy od tego, czego dokładnie szukasz.

Nadrzędny element DIV (zakładam, że najbardziej zewnętrzny element DIV) jest display: blocki będzie wypełniał cały dostępny obszar swojego pojemnika (w tym przypadku ciała), jaki może. Użyj innego typu wyświetlacza - inline-blockprawdopodobnie to, do czego zmierzasz:

http://jsfiddle.net/a78xy/