Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Здравствуйте! Обычно резиновую верстку делают так - создают три колонки, левой и правой колонкам задают какую-то ширину (px или %), центральной колонке ширину не задают. Таким образом, при изменении размеров окна браузера, размер веб-страницы изменяется из-за того, что изменяется ширина центральной колонки. При этом во все три колонки можно поместить текст (или другую информацию).
Возник вопрос. Как сделать так, чтобы фиксированного размера была центральная колонка (например, width="900px"
, а боковые колонки изменяли свой размер при изменении окна браузера. При этом боковые колонки должны иметь одинаковую ширину, чтобы центральная колонка всегда была по центру. И во все три колонки можно было поместить текст.
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Попробуйте левой и правой задать width=50%, а центральной width=900px.
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Я так пробовал, но не помогает.
<head>
<style type="text/css">
#left,#center,#right {
height: 100px;
}
#left {
float: left;
width: 50%;
background: #ff0;
}
#right {
float: right;
width: 50%;
background: #ff0;
}
#center {
width: 900px;
}
</style>
</head>
<body>
<div id="left">1
</div>
<div id="right">3
</div>
<div id="center">2
</div>
</body>
samisite
Новичок
Дата регистрации:
10.03.2013 06:13:59
Сообщений: 7
Особенностью "плавающих элементов" при помощи float, является то, что помимо самого элемента float: left; /*положение слева*/всегда необходимо указывать ширину плавающего элемента , в данном случае, я указал эту ширину равной 150px в таблице стилей.
Смотри здесь:
http://samisite.ru/vhod_css/rez_v/maket.html
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Спасибо за пример. Но этот вариант, я написал в самом начале - изменение размера страницы, происходит из-за изменения размеров центральной колонки. В данном случае требуется, чтобы центральная колонка всегда была постоянной. А у Вас центральная колонка увеличивает размер, при растяжении окна браузера.