Трёх Колоночный Шаблон Сайта И Css

  • Автор темы borod
  • Дата начала
B

borod

Гость
#1
Добрый вечер.
Трёх колоночный шаблон, левая колонка меню, посередине контент.
Код:
<div class="left">
<div class="middle">
<div class="right">
Если ставим на каждую колонку ширину в процентах, к примеру
Код:
.left{float: left; position: relative; width: 20%;}
.middle{float: left; position: relative; width: 60%;}
.right{float: right; position: relative; width: 20%;}
Все колонки равномерно(соотвествено процентам) увеличиваются или уменьшаются в зависимости от ширины окна браузера.

Как сделать что-бы ширина менялась только у средней колонки, а правая и левая были всегда одинакового размера?
Сделал так:
Код:
.left{float: left; position: relative; width: 200px;}
.middle{float: left; position: relative; min-width: 995px; max-width: 1400px;}
.right{float: right; position: relative; width: 200px;}
не работает.

Правая и левая колонка по width: 200px. Надо что-бы средняя колонка менялась по ширине от 995px до 1400px, в зависимости от ширины окна браузера.
Где копать?
 

1ive

Well-Known Member
12.09.2010
621
0
#2
Правую и левую колонки сделать фиксированой ширины, а для средней не указывать совсем.

И, наверное, всё таки будет правильней так:
HTML:
<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div>
 
B

borod

Гость
#3
Правую и левую колонки сделать фиксированой ширины, а для средней не указывать совсем.

Пробывал не работает.
Средняя колонка сползает вниз под левую колонку и растягивается по максимуму до краёв браузера, правая колонка сползает под среднюю.
----
Может это поможет:
Данные три колонки находятся в диве
Код:
<div class="fb">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
Код:
.fb	{margin: 0 auto; min-width: 995px; max-width: 1400px;}
Может как то можно ограничить ширину средней колонки в промежутке от 950px до 1200px ?
 

1ive

Well-Known Member
12.09.2010
621
0
#4
"Пробывал не работает."
Вправьте себе руки.

У меня работает.

HTML:
<style>
.fb  {margin: 0 auto; min-width: 995px; max-width: 1400px;}
.left{float: left; position: relative; width: 200px; background:#ff0000; height:500px;}
.middle{float: left; position: relative; height:500px;}
.right{float: right; position: relative; width: 200px;background:#0000ff;height:500px;}
</style>

<div class="fb">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
Высота и цвет фона - для наглядности. Удалить перед использованием
 
B

borod

Гость
#5
"Пробывал не работает."
Вправьте себе руки.

Тут не руки надо, а мозг вправлять.

1ive сказал(а):
<style>
.fb {margin: 0 auto; min-width: 995px; max-width: 1400px;}
.left{float: left; position: relative; width: 200px; background:#ff0000; height:500px;}
.middle{float: left; position: relative; height:500px;}
.right{float: right; position: relative; width: 200px;background:#0000ff;height:500px;}
</style>

<div class="fb">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>[/html]

Высота и цвет фона - для наглядности. Удалить перед использованием
Создал чистую html страницу, проверил на ней - работает, но на сайте не хочет работать!
Что может заставлять среднюю колонку расширяться максимально и сползать вниз под левую колонку ?
 

1ive

Well-Known Member
12.09.2010
621
0
#6
Может проще чем гадать, будет дать адрес сайта?
 
B

borod

Гость
#7
Может проще чем гадать, будет дать адрес сайта?
Всем спасибо, нашёл в гугле решение:

Код:
<style>
.fb {margin: 0 auto; min-width: 995px; max-width: 1400px;}
.middle{float: left; width: 100%;}
.middlecontent{margin: 0 200px;}
.left{float: left; margin-left: -100%; width: 200px;}
.right{float: left; margin-left: -200px; width: 200px;}
</style>

<div class="fb">
<div class="middle"></div>
<div class="middlecontent"></div>
<div class="left"></div>
<div class="right"></div>