3 колонки одной высоты с резиновым центром

Yuriy · November 6, 2010

Добрый вечер!

Возникла задача сверстать 3 колонки одной высоты. Мне очень понравился метод Matthew Taylor'a, но одно меня ставит в тупик: все колонки здесь имеют длину в %.

Мне же нужно, к примеру, 300px левая, 350px правая и центр - всё оставшееся место.

За основу брал статью-перевод

http://www.master-web.info/equal-height-co...ss-browser-css/

Крутил, вертел, пока ничего не вышло. И почему-то кажется, что этот метод не рассчитан под фиксированные сайд-бары Есть ли у кого идеи, как это и можно ли сделать?

Спасибо

pxdude · November 6, 2010

#container1 {
	float:left;
	width:100%;
}
#col1 {
	float:left;
	width:300px;
	background:red;
}
#col2 {
	float:left;
	width:100%;
	background:yellow;
}
#col3 {
	float:left;
	width:350px;
	background:green;
}

Edited November 6, 2010 by pxdude

Yuriy · November 6, 2010

Я не пойму, что Вы хотите мне показать этим кодом...

Edited November 6, 2010 by Yuriy

pxdude · November 6, 2010

Я не пойму, что Вы хотите мне показать этим кодом...

напишите код в котором нужно сделать изменения...

Yuriy · November 6, 2010

Он в статье, после слов "Возвращаем колонки с контентом на свои позиции".

deadrash · November 6, 2010

Посмотри как тебе такой вариант? http://fiestakids.jino.ru/shablon/01/

UPD: Странно, но способ работает только в фаерфоксе

<div id="wrapper">
	<div id="kol-1"></div>
	<div id="kol-2"></div>
	<div id="kol-3"></div>
</div>

#wrapper{
	display:table;
	height:100%;
	margin-left:300px;
	margin-right:350px;
}
#kol-1{
	display:table;
	margin-left:-300px;
	width:300px;
	height:100%;
	float:left;
}
#kol-2{
	display:table;
	width:100%;
	height:100%;
	float:left;
}
#kol-3{
	display:table;
	margin-right:-350px;
	width:350px;
	height:100%;
	float:right;
}

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

Edited November 7, 2010 by deadrash

Yuriy · November 7, 2010

display:table;

Такой вариант, к сожалению, сразу отметается. Это свойство не поддерживают IE6-7.

deadrash · November 7, 2010

Такой вариант, к сожалению, сразу отметается. Это свойство не поддерживают IE6-7.

Да, я уже заметил что оно работает почему-то ТОЛЬКО в фаерфоксе

deadrash · November 7, 2010

Вариант 2 Работает везде кроме IE6.

http://fiestakids.jino.ru/shablon/02/

<div id="wrapper-1">
	<div id="wrapper-2">
		<div id="wrapper-3">
			<div id="kol-1"></div>
			<div id="kol-2"></div>
			<div id="kol-3"></div>
		</div>
	</div>
</div>

#wrapper-1{
	position:relative;
	float:left;
	background-color:#2Fd;
}
#wrapper-2{
	float:left;
	position:relative;
	left:-350px;
	background-color:#Fdd;
}
#wrapper-3{
	float:left;
	position:relative;
	left:350px;
	margin-left:300px;
	margin-right:350px;
	background-color:#add;
}
#kol-1{
	margin-left:-300px;
	width:300px;
	float:left;
	background-color:#dda;
}
#kol-2{
	width:100%;
	float:left;
	background-color:#daa;
}
#kol-3{
	margin-right:-350px;
	width:350px;
	float:right;
	background-color:#ada;
}

Думаю побороть IE6 будет не сложно, так что наверное уже можно использовать этот вариант.

А теперь расскажи для чего вообще это нужно? Это ведь всё равно фикция и колонки на самом деле не одной высоты. Если это нужно только для бэгграунда, тогда вообще не нужно никаких изголений с передвижением колонок, можно 2 обёрточных дива использовать и в них ставить бэкграунд для левой и правой колонки и позицианировать его при помощи background-position:center bottom;

Короче, показывай макет.

Edited November 7, 2010 by deadrash

deadrash · November 7, 2010

ie6 побеждён дополнительным стилем подключённым через

коротый содержит:

#wrapper-2{left:-1000px;}
#wrapper-3{left:700px;}

И дабавлены свойства position в 3 колонки.

http://fiestakids.jino.ru/shablon/02/

Но ИМХО это бред, показывай макет, придумаем способ получше.

Edited November 7, 2010 by deadrash

psywalker · November 7, 2010

Выбирай

http://yandex.ru/yandsearch?text=%D0%BA%D0...6510&lr=213

Yuriy · November 7, 2010

Вариант 2 Работает везде кроме IE6.

Открываю ссылку в любом браузере - нигде колонки одной высоты не выводятся

Короче, показывай макет.

Я дал ссылку. В статье дан html и в конце css. Больше ничего для задачи не нужно.

psywalker, спасибо, но я все эти методы могу Вам сам рассказать наизусть.

Я задал конкретный вопрос. Если идей и решений нет, то я просто от него откажусь.

psywalker · November 7, 2010

psywalker, спасибо, но я все эти методы могу Вам сам рассказать наизусть.
Я задал конкретный вопрос. Если идей и решений нет, то я просто от него откажусь.

Покажи мне рисунок того, что ты хочешь получить.

Yuriy · November 7, 2010

Покажи мне рисунок того, что ты хочешь получить.

А что из первого сообщения конкретно не ясно?

Есть метод. В нём все колонки резиновые за счёт ширины всех колонок в %. Мне нужны боковые колонки в px, центральная - занимает всё свободное время.

Рисунком никаким эту задачу не описать. На словах всё ясно.

Serlutin · November 7, 2010

Вот хороший трехколонный макет http://blog.html.it/layoutgala/LayoutGala13.html

А вот способ одинаковой высоты колонок http://habrahabr.ru/blogs/css/64242/

Немного волшебства, и даже в IE6 работать будет (только нужен хак для минимальной ширины).

Единственный недостаток, не будут работать якоря, из-за overflow: hidden

Edited November 7, 2010 by Serlutin

deadrash · November 7, 2010

Открываю ссылку в любом браузере - нигде колонки одной высоты не выводятся sad.gif

Работает везде. Поменял цвет колонок, думаю так будет видней.

Покажи мне рисунок того, что ты хочешь получить.

+1 Нефига не понятно что нужно получить.

А что из первого сообщения конкретно не ясно?

В первом сообщении ссылка на способ в котором высота колонок это фикция, на саомом деле они там разной высоты, просто вместо их фона виден фон подложенных дивов определённым способом смещённых.

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

Edited November 7, 2010 by deadrash

Yuriy · November 7, 2010

Вот хороший трехколонный макет http://blog.html.it/layoutgala/LayoutGala13.html
А вот способ одинаковой высоты колонок http://habrahabr.ru/blogs/css/64242/

"Хороший трёхколоночный макет" я и сам могу сделать. Мне нужна одинаковая высота. А про способ я уже сказал. Не предлагайте! Если не знаете, чем помочь, не предлагайте то, что я не прошу! Пожалуйста!

Работает везде. Поменял цвет колонок, думаю так будет видней.

ок, я посмотрю подробнее.

+1 Нефига не понятно что нужно получить.

Да что ж такое... Ну что не понятно?

html

<div id="container3">
	<div id="container2">
		<div id="container1">
			<div id="col1">Column 1</div>
			<div id="col2">Column 2</div>
			<div id="col3">Column 3</div>
		</div>
	</div>
</div>

css

#container3 {
	float:left;
	width:100%;
	background:green;
	overflow:hidden;
	position:relative;
}
#container2 {
	float:left;
	width:100%;
	background:yellow;
	position:relative;
	right:30%;
}
#container1 {
	float:left;
	width:100%;
	background:red;
	position:relative;
	right:40%;
}
#col1 {
	float:left;
	width:30%;
	position:relative;
	left:70%;
}
#col2 {
	float:left;
	width:40%;
	position:relative;
	left:70%;
}
#col3 {
	float:left;
	width:30%;
	position:relative;
	left:70%;
}

Левая и правая колонки имеют ширину в %. Я хочу в пикселях.

Всё! Задача описана 100% ясно и корректно.

Edited November 7, 2010 by Yuriy

psywalker · November 7, 2010

Yuriy

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

Yuriy · November 7, 2010

Дружище, тебе уже дали кучу ссылок

Пятый раз повторяю - я не просил ссылки. Я все методы наизусть знаю. Меня заинтересовал конкретный вопрос, который остался в первом сообщении.

потом сделали своими руками много решений

Одно решение. Спасибо автору, я его посмотрю чуть позже.

Если тебе лень почитать, разобраться, то это твои проблемы.

Ну если я наизусть знаю все методы, то я точно натуральный лентяй

Ладно. Раз больше по делу ничего, то будем смотреть то, что имеется.

deadrash · November 7, 2010

ок, я посмотрю подробнее.

Посмотрел? Чем не подходит?

Мне нужна одинаковая высота.
Левая и правая колонки имеют ширину в %. Я хочу в пикселях.

ОК! Готово Всё так как ты описал!

http://fiestakids.jino.ru/shablon/02/

Yuriy · November 7, 2010

Посмотрел? Чем не подходит?

Я не говорил, что не подходит Предварительно посмотрел сейчас - всё супер, позже посмотрю код, поизучаю

Огромное спасибо!

Serlutin · November 7, 2010

"Хороший трёхколоночный макет" я и сам могу сделать. Мне нужна одинаковая высота. А про способ я уже сказал. Не предлагайте! Если не знаете, чем помочь, не предлагайте то, что я не прошу! Пожалуйста!

Извините, можно вопрос, для чего вам нужны 3 колонки с резиновым центром. Можно предположить, что это для создания каркаса сайта, так как если вам нужна обычная таблица, то проще использовать её.

По первой ссылки, то что вам нужно, 3 колонки, две из них фиксированной ширины, центральная тянется. Центральная часть идёт в центре, чтобы Google в баннерах не заблудился. Остается только три колонки обернуть в общий див, и задать ему overflow: hidden и zoom: 1 (по желанию, можно и Width:100%, а можно забыть про IE6). А еще каждой колонке нужно прописать

padding-bottom: 20000px;
margin-bottom: -20000px

Всё, три колонки и все тянутся по высоте

Edited November 7, 2010 by Serlutin

Yuriy · November 7, 2010

Serlutin, мне нужны 3 колонки с резиновым центром для каркаса, да. Просто использую различные методы, и недавно узнал об этом, который обсуждаю в данной теме. Странно, как раньше я его пропустил... Вот и захотелось понять, как сайд-бары сделать фиксированными.

deadrash, респект! Код изучил, всё понял, большое спасибо! Немного опыта не хватает. Видимо, пока не разобрался я, как позиционируются элементы в связке, когда у каждого position:relative. Это мне и не даёт нормально продумать ситуацию... Нужно наконец-то разобраться с этим.

Вопрос решён, всем спасибо за внимание!

deadrash · November 7, 2010

Обидно только что такой вариант http://fiestakids.jino.ru/shablon/01/ работает исключительно в фаерфоксике =\ понять бы почему.

... фаерфоксик ...

Serlutin · November 7, 2010

понять бы почему.
... фаерфоксик

Возможно, что webkit, если видит свойство Float, начинает обрабатывать его как блок, а не таблицу. Но это только предположение.

Edited November 7, 2010 by Serlutin

Yuriy · November 8, 2010

deadrash, нашёл недоработку

Если в центральной колонке мало информации - она будет по длине занимать места столько, сколько в ней контента.

Например, прописать пару слов или пару строк, да увеличить разрешение экрана...

Sign In

3 колонки одной высоты с резиновым центром

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information