DIV не уменьшается при изменении размера

Таким образом, у меня есть сайт с двумя двумя панелями DIV: область содержимого слева и фиксированное меню 300 пикселей вправо, причем оба они достигают максимального 1200 пикселей. Я хочу, чтобы пользователи могли изменять размер окна, а область LEFT сжимается, при этом правое меню остается фиксированным. Но сейчас я не могу найти способ сделать это, все выглядит хорошо при максимальном размере, но левая панель не уменьшается, если я изменяю размер окна, вместо этого правое меню просто обертывается в нижней части экрана. Это было бы легко с помощью меню слева, но меню справа. Вот что я имею до сих пор:

#main
{
 max-width: 1200px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0;
 display: block;
 padding: 0;
}
#left
{
 max-width: 890px;
 float: left;
 padding-right: 10px;
}
#right
{
 width: 290px;
 top: 0;
 float: right;
 padding-right: 10px;
 padding-left: 10px;
}
2 ответа

вы можете использовать CSS calc() для регулировки ширины левого контейнера.

ВАРИАНТ 1 FIDDLE

HTML

<div id="main">
 
  
</div>

CSS

#main{
 width: 100%; //set to 100% since you're capping it at 1200 anyways
 max-width: 1200px;
 /* margin-right: auto;
 margin-left: auto;
 margin-top: 0; */ condense these to the following:
 margin: 0 auto;
 /*display: block;*/ already a block element so not necessary 
 padding: 0;
 overflow: hidden; //add to correct floating elements
}

#left{
 background: red; //just for my test
 height: 100px; //just for my test
 width: calc(100% - 300px); //readjusts based on screen size
 float: left;
 padding-right: 10px;
 -moz-box-sizing: border-box; //if you use padding add these lines to fix issue of padding adding to width 
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }

 #right{
 background: black; //just for my test
 height: 100px; //just for my test
 width: 300px;
 /*top: 0;*/ //dont need, not doing anything
 float: right;
 /*padding-right: 10px;
 padding-left: 10px;*/ //can condense to following:
 padding: 0 10px;
 -moz-box-sizing: border-box; //see padding explanation above
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }

ИЛИ

Если вы беспокоитесь о старых браузерах, вы можете сделать это с помощью display: table и display: table-cell like so:

ВАРИАНТ 2 FIDDLE

CSS

#main{
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 display: block;
 padding: 0;
 display: table; //add
 table-layout: fixed; //add
}

#left{
 display: table-cell; //use instead of float
 background: red;
 height: 100px;
 padding-right: 10px;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

#right{
 display: table-cell; //use instead of float
 background: black;
 height: 100px;
 width: 300px;
 padding: 0 10px;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}


Вместо того, чтобы плавать divs, попробуйте display: inline-block в левой и правой панелях или CSS3 flexbox (в зависимости от того, насколько далеко вы поддерживаете устаревшие браузеры).

Пример Flexbox: http://jsfiddle.net/571k3gx2/

licensed under cc by-sa 3.0 with attribution.