Форум Flasher.ru - Резиновый трехколоночный div?

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - Резиновый трехколоночный div? (http://www.flasher.ru/forum/showthread.php?t=141142)

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

Добрый день!

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

Код:

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;

}

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

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

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

Код:

<!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>

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

Код:

<!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; /*аналогично чуть выше*/

}

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

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

Цитата:

Сообщение от Acxat (Сообщение 916471)

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

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

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

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

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

Цитата:

Сообщение от aksios (Сообщение 916487)

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

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

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

Цитата:

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