librown
@librown
На-все-руки-мастер и немного кодер

Как сверстать гибкий (резина + статика) 3х колоночный макет?

Привет, коллеги!

Верстаю макет в 3 колонки:
1. левый сайдбар 300px
2. контент - резина
3. правый сайдбар 200px

Так как сетка предполагается сильно адаптивной - нужно максимально простую верстку колонок сделать, чтобы легко было ими манипулировать.

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

Использовать calc опасаюсь (зря?), возможен трафик со старых браузеров.

Бутстрап не использую, flexbox пока тоже.

Вот эта раскладка: https://jsbin.com/roqiqokine/edit?html,css,output

<div class="clearfix">
   <div class="sidebar_left"></div>
   <div class="content"></div>
   <div class="sidebar_right"></div>
</dv>

.sidebar_left {
   float: left;
   width: 300px;
}

.sidebar_right {
   float: right;
   width: 200px;
}

.content {
   margin-right: 200px;
   margin-left: 300px;
   padding: 0 50px;
}


В этой раскладке проблема - правая колонка уползает вниз. Если поменять в разметке колонки content и sidebar_right местами - то все чинится, но это плохой путь.

Подскажите правильный путь?
Спасибо.
  • Вопрос задан
  • 570 просмотров
Пригласить эксперта
Ответы на вопрос 3
svistiboshka
@svistiboshka
живые веб интерфейсы
@coderlex
С float'ами всегда сначала рисуйте плавающие элементы (в данном случае сайдбары).
И только после этого обычную статику.
Т.е.:
<div class="clearfix">
   <div class="sidebar_left"></div>
   <div class="sidebar_right"></div>
   <div class="content"></div>
</dv>

А чтобы сделать адаптив в вашем случае, используйте изначальный вариант html, но в стилях - через table-cell и (min-|max-)width.
Ответ написан
Комментировать
@kolibry1
web-developer- junior
попробуйте всё же бутстрап. Он не так страшен, как его малюют. скачиваете и подключаете библиотеки, тратите 20мин на изучение названия классов-колонок, и вуаля.
и кстати, пятиколоночный бутстрап тоже есть.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы