CSSのmin-widthプロパティが機能していません

Question

私は以下の問題があります：
divが他の要素を含んでいて、その幅をコンテンツに依存させようとしています。私はまた、このdivの最大幅を制限します。私はmin-widthとmax-widthをCSSに使用していますが、それはmin-widthが動作していないようです。 divの幅は内容に関係なく常にmax-widthの値です。

例：私は左の空のスペース、右側なしで、厳密にそれにあるフォームの周りに（それは私が話していた、メインのdivです）白div要素を持っているしたいと思います

。私はコンテンツが小さい場合でも、メインのdivは同じままであることを示すために、フォームスタイルmax-width:500pxを与えました。デフォルトでは

HTML

<div class="gInnerBox sInnerBoxMain"> 
    <form style="max-width:500px; margin-left: auto; margin-right: auto">    
     <div id='content'> 
        <!-- CONTENT --> 
     </div> 
    </form> 
</div> 

CSS

.gInnerBox{ 
    position: relative; 
    background-color: #fff; 
    opacity: 0.9; 
    padding: 10px 10px 10px 10px;  

    box-shadow: -5px -5px 20px #000, 5px 5px 20px #000; 
    -moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000; 
    -webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000; 

    border: 1px solid #000; 
    border-radius: 20px; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
} 

.sInnerBoxMain{ 
    max-width: 1000px; 
    min-width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    top: 50px; 
} 

Example http://wstaw.org/m/2011/11/25/ttt.png

Answer 1

、ブロックレベル要素は、可能な限り幅をいっぱいに拡大していきます。したがって、幅は基本的に「100％」（並べ替え）で、最大1000pxと言っているので、最大1000pxに拡大しています。最小幅が達成されています（少なくとも500ピクセルです）。要素の上にdisplay: inline-blockを設定し、それがあなたを助けるかどうかを見てください。これにより、最小幅と最大幅に注意を払いつつ、コンテンツの内容まで拡大することができます。残りのコンテンツをインラインにするには、後でブレーカー<br />を追加する必要があります。