Свойство CSS min-width не работает

у меня есть следующая проблема:
У меня есть div, содержащий другие элементы, и я пытаюсь сделать его ширину зависимой от содержимого. Я также ограничиваю максимальную ширину этого div. Я использую min-width и max-width в CSS, но, кажется,min-width не работает. Ширина div всегда является max-width значение, независимо от того, что содержание.

пример:

Я хотел бы иметь белый div (то есть основной div, я говорил о) строго вокруг формы то есть в нем, без пустых мест слева и справа. Я дал форму style max-width:500px чтобы показать, что даже если содержимое мало, основной div остается прежним.

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

пример http://wstaw.org/m/2011/11/25/ttt.png

1 ответов


по умолчанию блочный элемент будет расширяться, чтобы заполнить как можно больше ширины. Таким образом, его ширина в основном "100%" (вроде), и вы говорите максимум 1000px, поэтому она расширяется до максимума 1000px. Минимальная ширина достигается (это не менее 500px). Попробуйте установить display: inline-block на элементе и посмотреть, поможет ли это вам. Это должно сделать его только расширяться, насколько это содержание, все еще обращая внимание на минимальную и максимальную ширину. Возможно, вам придется добавить breaker <br /> после всего остального вашего контента адаптировать его в узде.