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

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

  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
    Сообщения:
    694
    Симпатии:
    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
    Сообщения:
    694
    Симпатии:
    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 страницу, проверил на ней - работает, но на сайте не хочет работать!
    Что может заставлять среднюю колонку расширяться максимально и сползать вниз под левую колонку ?
    [​IMG]
     
  6. 1ive

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    694
    Симпатии:
    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>
     
Загрузка...

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