CSS: автоматическое изменение размера div в соответствии с шириной контейнера

У меня есть два <div>: слева и содержимое. Эти два находятся внутри оболочки, у которой есть min-width:960px;. левая имеет фиксированную ширину, но я хочу сделать контент гибким с минимальной шириной 700px, а если экран шире, придерживайтесь его правой границы экрана.

CSS

#wrapper
{
    min-width:960px;
    margin-left:auto;
    margin-right:auto;
}
#left
{
    width:200px;
    float:left;
    background-color:antiquewhite;
    margin-left:10px;
}
#content
{
    min-width:700px;
    margin-left:10px;
    width:auto;
    float:left;
    background-color:AppWorkspace;
}

JSFiddle: http://jsfiddle.net/Zvt2j/

Ответ 1

Вы можете overflow:hidden на #content. Напишите вот так:

#content
{
    min-width:700px;
    margin-left:10px;
    overflow:hidden;
    background-color:AppWorkspace;
}

Отметьте http://jsfiddle.net/Zvt2j/1/

Ответ 2

Вы можете использовать гибкую коробку css3, она будет выглядеть следующим образом:

Сначала ваша обертка обертывает много вещей, поэтому вам нужна оболочка только для двух горизонтальных плавающих ящиков:

 <div id="hor-box"> 
    <div id="left">
        left
      </div>
    <div id="content">
       content
    </div>
</div>

И ваш css3 должен быть:

#hor-box{   
  display: -webkit-box;
  display: -moz-box;
  display: box;

 -moz-box-orient: horizontal;
 box-orient: horizontal; 
 -webkit-box-orient: horizontal;

}  
#left   {
      width:200px;
      background-color:antiquewhite;
      margin-left:10px;

     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;  
}  
#content   {
      min-width:700px;
      margin-left:10px;
      background-color:AppWorkspace;

     -webkit-box-flex: 1;
     -moz-box-flex: 1;
      box-flex: 1; 
}

Ответ 3

#wrapper
{
    min-width:960px;
    margin-left:auto;
    margin-right:auto;
    position-relative;
}
#left
{
    width:200px;
    position: absolute;
    background-color:antiquewhite;
    margin-left:10px;
    z-index: 2;
}
#content
{
    padding-left:210px;
    width:100%;
    background-color:AppWorkspace;
    position: relative;
    z-index: 1;
}

Если вам нужно пробел справа от #left, добавьте border-right: 10px solid #FFF; в #left и добавьте 10px в padding-left в #content

Ответ 4

CSS-контейнер для автоматической установки между float: left и float: right divs решил мою проблему, спасибо за ваши комментарии.

#left
{
    width:200px;
    float:left;
    background-color:antiquewhite;
    margin-left:10px;
}
#content
{
    overflow:hidden;
    margin-left:10px;
    background-color:AppWorkspace;
}

Ответ 5

Я обновил ваш jsfiddle и вот вам изменения CSS:

#content
{
    min-width:700px;
    margin-right: -210px;
    width:100%;
    float:left;
    background-color:AppWorkspace;
}