包裝DIV不工作的最小寬度

Question

我有兩個浮動DIV（兩列）嵌套在「清除浮動」-DIV中，它本身嵌套在居中的DIV（「包裝」DIV）中。

<div id="content"> 
    <div class="block2"> 
     <div id="slot_left"> 
      CONTENT-LEFT 
     </div> 
     <div id="slot_right"> 
      *CONTENT-RIGHT* 
     </div> 
    </div> 
</div> 

右列有min-width和max-width CSS選項集。但包裝DIV，其中min-width和max-width也始終擴展到最大寬度。

#content { 
    min-width: 300px; 
    min-height: 80px; 
    max-width: 350px; 
    margin: 0 auto; 
    background: #c00; 
} 
.block { 
    overflow: hidden; 
    _overflow: visible; 
    _overflow-x: hidden; 
    _height: 0; 
} 
#slot_left { 
    width: 200px; 
    background: #ff0; 
    float: left; 
    position: relative; 
} 
#slot_right { 
    float: left; 
    background: #cc0; 
    min-width: 100px; 
    max-width: 150px; 
    position: relative; 
} 

這是什麼原因？我想包裝DIV具有所需的最小寬度，但要在屏幕上居中。

Here是一個小提琴。

Answer 1

http://jsfiddle.net/sHB7g/1/

#content { 
    display: inline-block; 
} 

，然後加入內容封裝器

#contentwrapper { 
    text-align: center; 
} 

則HTML是這樣

<div id="contentwrapper"> 
     <div id="content"> 
     <div class="block"> 
      <div id="slot_left"> 
       CONTENT-LEFT 
      </div> 
      <div id="slot_right"> 
       *CONTENT-RIGHT* 
      </div> 
     </div> 
    </div> 

Answer 2

使用display:inline-block

爲什麼會這樣？div默認是塊級元素，所以，當你給max-width，它總是服從它佔據最大面積可能....

http://jsfiddle.net/sHB7g/3/

CSS

#content { 
    min-width: 300px; 
    min-height: 80px; 
    max-width: 350px; 
    margin: 0 auto; 
    background: #c00; 
    display:inline-block 
} 
.block { 
    display:inline-block; 
    overflow: hidden; 
    border:1px solid #000; 
}