Адаптивность 3-колончастого макета

#1 5 февраля 2015 в 23:55

Доброго времени суток, уважаемое сообщество.

Столкнулся с не решаемой задачей (по крайней мере пока не удалось решить).

Есть шаблон на 3 колонки. Левый и правый сайдбар, центр — основной контент.

Порядок в блоках такой

<div id="left">
modules
</div>
 
<div id="center">
modules
</div>
 
<div id="right">
modules
</div>

В общем, если есть центр и правый сайтбар, то все ок. Изначально задаю флоат лефт для центра и флоат райт для сайдбара, потом при нужном расширении убираю флоат и выставляю ширину в 100%. Т.е. центральный блок идет сверху, сайдбар под ним. Все ок.

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

Собственно, как их можно поменять местами то? Чтобы при уменьшении сначала отображался центральный блок, а под ним левый сайдбар?

#2 6 февраля 2015 в 00:47

Для #left на нужном разрешении float:right не пробовали?

Украинский для инстант

#3 6 февраля 2015 в 00:56

float:right
Олег Васильевич я

В том и дело, что это проверил в первую очередь. Не сработало. Как было сверху, так и осталось.

Сегодня в 16:43

#4 6 февраля 2015 в 08:29

scanread, на маленьком разрешении экрана тот код что впереди будет выводиться раньше, так ведь? Для того чтобы левая позиция была после контента нужно его в коде поставить а точнее оставить тот же правый сайдбар но через стили вывести слева.

<div class="row">
	<div class="col-9"></div>
	<div class="col-3"></div>
</div>
 
.col-9 {
	position: relative;
	width: 75%;
	left: 25%;
	float: left;
}
.col-3 {
	position: relative;
	width: 25%;
	right: 75%;
	float: left;
}

Чем меньше знаешь - тем Больше тупой. OneMinima шаблон ICMS2

#5 6 февраля 2015 в 10:51

scanread, посмотрите этот генератор csstemplater.com/
Там 2 сайдбара, слева и справа, но в коде они идут после центральной части. Верстка чуть сложнее, чем на вашем примере. Но зато "адаптивить" проще.

Разработка виджетов, полей и компонентов для instantcms 2, сайты под ключ. site: www.zau4man.ru telegram: @zau4man