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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем borod, 30 ноя 2011.

Наш партнер Genesis Hackspace
  1. borod

    borod Гость

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

    Как сделать что-бы ширина менялась только у средней колонки, а правая и левая были всегда одинакового размера?
    Сделал так:
    Код (Text):
    .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, в зависимости от ширины окна браузера.
    Где копать?
     
  2. 1ive

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    621
    Симпатии:
    0
    Правую и левую колонки сделать фиксированой ширины, а для средней не указывать совсем.

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

    borod Гость


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

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    621
    Симпатии:
    0
    "Пробывал не работает."
    Вправьте себе руки.

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

    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>
    Высота и цвет фона - для наглядности. Удалить перед использованием
     
  5. borod

    borod Гость


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

    Создал чистую html страницу, проверил на ней - работает, но на сайте не хочет работать!
    Что может заставлять среднюю колонку расширяться максимально и сползать вниз под левую колонку ?
    Трёх Колоночный Шаблон Сайта И Css
     
  6. 1ive

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    621
    Симпатии:
    0
    Может проще чем гадать, будет дать адрес сайта?
     
  7. borod

    borod Гость

    Всем спасибо, нашёл в гугле решение:

    Код (Text):
    <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>
     
Загрузка...

Поделиться этой страницей