La propiedad CSS min-width no funciona

Question

Tengo el siguiente problema:
Tengo div que contiene otros elementos y trato de hacer que su ancho dependa del contenido. También restrinjo el ancho máximo de este div. Yo uso min-width y max-width en CSS, pero parece que min-width no está funcionando. El ancho de div es siempre el valor max-width, sin importar el contenido.

Ejemplo:

me gustaría tener el div blanco (es decir div principal, que estaba hablando) estrictamente alrededor de la forma que está en ella, sin espacios vacíos en el lado izquierdo y derecho . Di el estilo de formulario max-width:500px para mostrar que incluso si el contenido es pequeño, la div principal permanece igual.

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

Por defecto, un elemento en bloque se expandirá para llenar lo más ancho posible. Así que su ancho es básicamente "100%" (más o menos) y está diciendo un máximo de 1000 píxeles, por lo que se amplía hasta el máximo de 1000 píxeles. Se está logrando el ancho mínimo (es al menos 500 px). Pruebe a configurar display: inline-block en el elemento y vea si eso lo ayuda. Esto debería hacer que solo se expanda en cuanto a su contenido sin dejar de prestar atención a los anchos mínimo y máximo. Puede que tenga que agregar un interruptor <br /> después para que el resto de su contenido se adapte a que esté en línea.