Резиновая верстка в 3 колонки

johnson · May 14, 2011

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

psywalker · May 14, 2011

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

Можно, overflow: hidden; тебе в помощь.

johnson · May 15, 2011

Можно, overflow: hidden; тебе в помощь.

каким способом тогда реализовывать верстку. Я делаю так:

HTML:


<div id="left_col">Navigation</div>

<div id="middle_col">
 <div id="content"><h1>Our mission</h1>
 <p>The Rainforest Alliance works to conserve biodiversity and ensure sustainable 
 livelihoods by transforming land-use practices, business practices and 
 consumer behavior.</p>
 </div>
</div>

<div id="right_col">Right column</div>

CSS:


#left_col, #middle_col {	margin-right: -100%;}
#middle_col {
	left: 24%;
	width: 56%;
}
#right_col {	left: 80%;}
#left_col,#right_col {width: 20%;}
#left_col,
#middle_col,
#right_col {
	float: left;
	position: relative;
}

psywalker · May 15, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    *{ margin: 0; padding: 0;}
    body { min-width: 500px;}
	*html body {
width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");

} 
    #left_bg { 
		float: left;
		width: 25%;
		background: red;
		margin-right: -3px;
	}
    #right_bg { 
		float: right; 
		width: 25%;
		background: red;
		margin-left: -3px;
	}
    #content {
        overflow: hidden;
        background: blue;
		zoom:1;
    }
</style>
</head>


<body>

<div id="left_bg">Left</div>
<div id="right_bg">Right</div>

<div id="content">Тут какой-то контент</div>

</body>
</html>

buddah · May 15, 2011

Пардон за глупый вопрос, просто интересно. Зачем там маржин -3пикс?

psywalker · May 16, 2011

Пардон за глупый вопрос, просто интересно. Зачем там маржин -3пикс?

Для ИЕ6

johnson · May 16, 2011

psywalker, а минимальная ширина зачем?

Great Rash · May 16, 2011

psywalker, а минимальная ширина зачем?

Минимальная ширина нужна всегда. А при "резине" особенно.

buddah · May 16, 2011

Пардон за глупый вопрос, просто интересно. Зачем там маржин -3пикс?
Для ИЕ6

Спасибо.

min-width: 500px;

В таком значении 500 несет в себе какой-то сакральный смысл или просто для примера? Почему именно 500?

И почему здесь фигурирует число 700?

width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");

Edited May 16, 2011 by buddah

johnson · May 16, 2011

Минимальная ширина нужна всегда. А при "резине" особенно.

Понятно, просто думал, может разъезжаться начнет без этого.

Вообще достаточно легкая реализация 3-х колоночного макета получается, зачем тогда часто используются более сложные, например то что, привел я в пример.

Great Rash · May 16, 2011

Более сложные реализации используются для того чтоб не было overflow: hidden; т.к. при наличии этого свойства надо учитывать, что все что будет вылезать за пределы средней колонки будет обрезано.

psywalker · May 16, 2011

Пардон за глупый вопрос, просто интересно. Зачем там маржин -3пикс?
Для ИЕ6
Спасибо.
min-width: 500px;
В таком значении 500 несет в себе какой-то сакральный смысл или просто для примера? Почему именно 500?
И почему здесь фигурирует число 700?
width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");

Да пофиг, это для примера. Ставил от былды.

Минимальная ширина нужна всегда. А при "резине" особенно.
Понятно, просто думал, может разъезжаться начнет без этого.
Вообще достаточно легкая реализация 3-х колоночного макета получается, зачем тогда часто используются более сложные, например то что, привел я в пример.

Потому что ты просил:

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

Другими способами я вообще в принципе кажись не знаю даже как сделать. Ща лошара придёт, подскажет решение. Самому интересно.

Great Rash · May 16, 2011

Ща лошара придёт, подскажет решение. Самому интересно.

Подсказываю: <table>. Неожиданно правда? :rolleyes:

psywalker · May 16, 2011

Ща лошара придёт, подскажет решение. Самому интересно.
Подсказываю: <table>. Неожиданно правда?

Нее, ну это всё понятно. Я имел ввиду блочную вёрстку, не знаешь ли способов случайно? Может даже извращенских

Great Rash · May 16, 2011

Нет не знаю. Как-то не было необходимости.

johnson · May 16, 2011

Понятно. всем спасибо. Будем пробовать.

sigma77 · May 16, 2011

Вообще достаточно легкая реализация 3-х колоночного макета получается, зачем тогда часто используются более сложные, например то что, привел я в пример.

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

johnson · May 16, 2011

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

А оно кому то нужно в наше время? Вроде ПС уже не смотрят где стоит текст на странице.

psywalker · May 16, 2011

Более сложные реализации используются для того, чтобы изменить порядок следования колонок в коде html.
А оно кому то нужно в наше время? Вроде ПС уже не смотрят где стоит текст на странице.

Это нужно злым заказчика :rolleyes:

Sign In

Резиновая верстка в 3 колонки

Question

Link to comment

Share on other sites

18 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

Join the conversation

Обсуждения

Important Information