Возникла проблема с блочной вёрсткой. Допустим, у нас есть 3 блока:
Ширина sidebar-left и sidebar-right равна 300px и 250px соответственно. sidebar-left находится слева, sidebar-right – справа, content – между ними.
Как сделать так, чтобы ширина content занимала всё оставшееся место?
Ответ
Вводим дополнительный блок wrapper и работаем с дивами как с таблицей. И резиновое и вашим требованиям соответствует.
.wrapper {
display: table;
width: 100%;
}
.sidebar-left {
width: 300px;
display: table-cell;
height: 200px;
background: red;
}
.content {
display: table-cell;
height: 200px;
background: green;
}
.sidebar-right {
width: 250px;
display: table-cell;
height: 200px;
background: blue;
}
http://jsfiddle.net/en7dv0jw/
Извиняюсь за дублирование css свойств.
Комментариев нет:
Отправить комментарий