Резиновый трехколоночный div?

Acxat · 17.06.2010, 11:59

Добрый день!

Мне надо чтоб при увеличений ширины центральной колонки

Код:

id="content_center"

сжималась правая колонка

Код:

id="content_right"

HTML тэг:

Код:

<body>

<div id="content">
<div id="content_left">
</div>
	
<div id="content_center">
</div>
	
<div id="content_right">
</div></div>
</body>

CSS код:

Код:

#content{
	width:950px; height:600px;
	border:#990000 solid 1px;
	margin: 0 auto;
	margin-top:30px;
}

#content_left{
	width:210px; height:500px;
	float:left;
	border: #007700 solid 1px;
}

#content_center{
	width:534px; height:500px;
	float:left;
	position: relative;
	border: #007700 solid 1px;
}

#content_right{
	width: 200px; height:500px;
	left: 0;
	float:right;
	position: relative;
	border: #007700 solid 1px;
}

Заранее спасибо!

studmar · 18.06.2010, 01:06

Необходимо задать ширину в процентах в блоках, которые должны тянуться

membrilius · 18.06.2010, 01:20

Что-то вроде такого надо?

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>proba</title>
	<style>
		html {
			height: 100%;
		}
		
		body {
			height: 100%;
			margin: 0; 
			padding: 0;
		}
		
		#content {
			height: auto !important;
			height: 100%;
			min-height: 100%;
			overflow: hidden;
		}
			
		#left {
			float: left;
			height: 100%;
			width: 200px;
			padding-bottom: 32767px;
 			margin-bottom: -32767px;
			border: 3px solid #ff0000;
		}
		
		#center {
			margin-left: 210px;
			margin-right: 210px;
			height: 100%;
			padding-bottom: 32767px;
 			margin-bottom: -32767px;
			border: 3px solid #ff0000;
		}
		
		#right {
			float: right;
			height: 100%;
			width: 200px;
			padding-bottom: 32767px;
 			margin-bottom: -32767px;
			border: 3px solid #ff0000;
		}

	</style>
</head>

<body>
<div id="content">

        <div id="left">
            aaa<br>
            aaa<br>
            aaa<br>
            aaa<br>
            aaa<br>
            aaa<br>
        </div>
    
        <div id="right">
            bbb<br>
            bbb<br>
            bbb<br>
            bbb<br>
            bbb<br>
            bbb<br>
        </div>
    
        <div id="center">
            ccc<br>
            ccc<br>
            ccc<br>
            ccc<br>
            ccc<br>
            ccc<br>
        </div>

</div>
</body>
</html>

studmar · 18.06.2010, 12:52

Вот классический вариант:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
* { margin:0px; padding:0px;}

#content{
	width:100%; height:600px;
}

#content_left{
	width:250px; height:600px;
	float:left;
	background:#CCC;
}

#content_center{
	height:600px;
	margin:0 251px;
	background:#999;
}

#content_right{
	width:250px; height:600px;
	float:right;
	background:#CCC;
}

</style>

</head>

<body>

<div id="content">
<div id="content_left"></div>
<div id="content_right"></div>	
<div id="content_center"></div>
</div>

</body>
</html>

Здесь центральная колонка тянется на всю ширину.
Если вам надо чтобы содержимое сайта было фиксировано, то изменить ширину #content со 100% на фиксированную, при этом конструкция все равно будет работать.
Если честно, то не совсем понятна задача, ибо из названия темы следует одно, а из вашего примера другое.

Что касаемо вашего примера, вы слишком перемудрили, правильно было бы расположить элементы так:

Код:

<body>

<div id="content">
<div id="content_left"></div>
<div id="content_right"></div>	
<div id="content_center"></div>
</div>
</body>

при этом не стоит делать #content_center "плавающим", а сделать так как в моем примере.

в вашем css не понятны некоторые строчки:

Код:

#content_center{
	position: relative; /*зачем это нужно? хоть оно ни на что не влияет, но может кого-то ввести в заблуждение*/
}

#content_right{
	left: 0; /* непонятно зачем это нужно?*/
	position: relative; /*аналогично чуть выше*/
}

Acxat · 18.06.2010, 13:40

Спасибо вам за отзывы

Есть 3 колонки левая, середина, правая
Задача: при расширений средней колонки чтобы правая сужалась

studmar · 18.06.2010, 13:57

Цитата:

Сообщение от Acxat

Есть 3 колонки левая, середина, правая
Задача: при расширений средней колонки чтобы правая сужалась

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

Примеров реализации подобного с помощью CSS честно не встречал.

Если не секрет, можно объяснить специфику условия сжимания правой части?

aksios · 18.06.2010, 14:56

Не знаете как реализовать дивной версткой вставьте таблицу. Вас простят.

studmar · 18.06.2010, 15:10

Цитата:

Сообщение от aksios

Не знаете как реализовать дивной версткой вставьте таблицу. Вас простят.

А как по вашему можно реализовать уменьшение правой колонки при увеличении центральной в таблице?

aksios · 18.06.2010, 15:25

studmar, а Вы попробуйте.

Цитата:

studmar · 18.06.2010, 15:31

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