Проблема с резиновым дизайном

sweb27
На сайте с 08.10.2012
Offline
29
584

Всем привет, не нашел ответа на свой вопрос, создаю новую тему.

Делаю резиновый дизайн, где 3 колонки, боковые имеют фиксированую ширину по 300px, а центральная растягивается по всей ширине моника то есть должна иметь width:100%. как вот, данная конструкция не работает :(.... помогите, в чем ошибка?, как лучше реализовать задачу?

HTML
<body>
<div id="container">
<div id="col-left">123</div>
<div id="col-center">123123</div>
<div id="col-right">123</div>
</div>
</body>

СSS

#container {
width:100%;
padding:5px;
background:#CCCCCC;
overflow:hidden;
}

#col-left {
width:300px;
background:#00CCFF;
float:left;
}
#col-center {
width:100%;
background:#0099FF;
float:left;
}

#col-right {
width:300px;
background: #0066FF;
float:left;
}

Я резиновые дизайны если честно надух не переношу, может быть зря конечно.. в данном случае мне не овтертется, пока не решу проблему, заранее спасибо.

Вот так это выглядит..

samimages
На сайте с 31.05.2009
Offline
427
#1

#col-right float:right;

не?

Опыт как иммунитет — приобретается в муках! Аудит семантики от 15К [долго] - ЛС
IT
На сайте с 25.12.2012
Offline
4
#2

Вам нужно ширину для каждой колонки задавать в процентах. Если, к примеру, у Вас ширина контейнера по дизайну 900рх, то каждая колонка будет по 30%.

Smiritel
На сайте с 25.12.2012
Offline
69
#3

В html-коде центральный блок нужно поставить после боковых, т.е. вот так:

<div id="container">

<div id="col-left">123</div>
<div id="col-right">123</div>
<div id="col-center">123123</div>
</div>

CSS-файл, соответственно, следующий:

#col-left {

width:300px;
background:#00CCFF;
float:left;
}

#col-center {
background:#0099FF;
margin:0 300px;
}

#col-right {
width:300px;
background: #0066FF;
float:right;
}


---------- Добавлено 26.12.2012 в 02:20 ----------

If_then_else:
Вам нужно ширину для каждой колонки задавать в процентах. Если, к примеру, у Вас ширина контейнера по дизайну 900рх, то каждая колонка будет по 30%.

Ни к чему абсолютно. ТСу, я так понимаю, необходима фиксированная ширина боковых колонок, да и основной контейнер - на всю длину.

Дали мне заказ, чтоб отвез я глаз. А я все сижу, глаз не отвожу.
sweb27
На сайте с 08.10.2012
Offline
29
#4
samimages:
#col-right float:right;

не?

Не, пробовал, это нн канает.. нашел решение вот какое.. может кому пригодится.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
*{padding: 0; margin: 0;}
#page{
width: 100%;
min-width: 800px;
}
* html #page {
width:auto;
padding-left: 800px;
}
* html #container2 {
margin-left: -800px;
position: relative;
}
* html #page, * html #container1, * html #container2{
height: 0;
}
#header {
clear: both;
width: 100%;
height:100px;
background:#9999FF;
}
#main{
width: 100%;
background:#99CC00;
}
#content{margin: 0 200px;}
#left{
float: left;
width: 300px;
background:#00CCFF;
}
#right{
float: right;
width: 300px;
background:#0099FF;
}
#footer{
clear: both;
width: 100%;
height:100px;
background:#9999FF;
}
</style>
</head>
<body>
<div id="page">
<div id="container1">
<div id="container2">
<div id="header">Header</div>

<div id="main">

<div id="right">
right
</div>
<div id="left">
left
</div>
<div id="content">
content
</div>
</div>
<div id="footer">Footer</div>
</div>
</div>
</div>
</body>
</html>

То есть проблему решил.

Спасибо всем, решение было под носом.

[Удален]
#5
sweb27:
То есть проблему решил.

и content будет после всякого хлама в сайдбарах... ))

Smiritel
На сайте с 25.12.2012
Offline
69
#6
Pavel_:
и content будет после всякого хлама в сайдбарах... ))

Ну это уже другой вопрос. Думаю, ТС разберется :)

Станислав
На сайте с 27.12.2009
Offline
258
#7

печальное решение вы нашли, коду тьма, а толку ....

Мы там, где рады нас видеть.
Smiritel
На сайте с 25.12.2012
Offline
69
#8
Ms-Dred:
печальное решение вы нашли, коду тьма, а толку ....

В чем именно "печальное"? Может, приведете Ваш вариант?

KS
На сайте с 11.06.2012
Offline
17
#9

ТС, вы бы дали ссылку, где нашли, может там и объяснение есть. Непонятно зачем вот этот кусок:

* html #page {

width:auto;
padding-left: 800px;
}
* html #container2 {
margin-left: -800px;
position: relative;
}
* html #page, * html #container1, * html #container2{
height: 0;
}

В остальном, как я понимаю, решение совпадает с предложенным товарищем sweb27.

FileSafe (http://filesafe.anek.ws/) - мониторинг неизменности файлов сайта для защиты от взлома. Для форумчан - первый год бесплатно.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий