Как сделать колонки в каркасе из 3 колонок резиновыми

[vslukas]

Доброго дня.Всем привет.Если кто-то сможет мне помочь, буду очень благодарен.Суть проблемы:
Имеется фиксированный шаблон из 3 колонок.Как сделать 2(центральную и правую) колонки в каркасе резиновыми?

Т.е. они должны тянуться.В правой колонке фото.Его видно на 30%.Надо чтобы потянув за границу правой колонки можно было открыть все фото.

[CroaToa]

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

overflow:auto; но он добавляет полосу прокрутки.

Edited February 19, 2014 by CroaToa

[CroaToa]

а если покажете код, то более подробный ответ получите.

[klierik]

@vslukas, не совсем понятно что именно требуется. слишком много вариантов можно предположить.

почитай, пожалуйста, в подписи как правильно задать вопрос.

[vslukas]

.  В  центральной  колонке  левые  и правые поля (слева от логотипа итекстового  блока  и справа от <сайт находится в разработке> и правогокрая  текстового блока) должны тянуться. При увеличении ширины колонкилоготип выравнивается по левому краю текста, надпись "сайт находится вразработке" - по правому. 
  При  увеличении ширины правой колонки картинка с очками "вылезает"из  под  центральной колонки (обратить внимание на тень) - в PSD-файлеесть картинка нужной ширины. Чёрный блок с текстом и блок с контактнойинформацией также тянуться, сохраняя свои пропоции и пропорции оступов.

А вот то, что я наваял:

@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0;}
html,body{height:100%;}
body{background:#c0c0c0; color:#000000; font-family:Tahoma, Geneva, sans-serif; font-size:11px;}

.wrapper{min-height:100%; width:770px; margin:auto; background:url(img/bg3.png) repeat-y; position:relative; }


.left{width:45px; float:left; min-height:100%;}

.top-left{background:url(img/bg_top_left.jpg) no-repeat; width:45px; height:130px;  }

.center{ width:490px; float:left;}

.header{ width:485px; height:130px; background:#ebeced; position:relative;
background: -moz-linear-gradient(left, #bec3c6 0%, #e3e5e5 10%);
background: -ms-linear-gradient(left, #bec3c6 0%, #e3e5e5 10%);
background: -o-linear-gradient(left, #bec3c6 0%, #e3e5e5 10%);
background: -webkit-linear-gradient(left, #bec3c6 0%, #e3e5e5 10%);

 }

.logo{ background:url(img/logo.png) no-repeat; width:270px; height:50px;  float:left; position:absolute; top:50px; left:20px;}

.header-text{text-align:right; width:150px; height:30px;float:right; position:absolute; top:50px; right:15px; font-family:Futura_book, Verdana, Geneva, sans-serif; font-size:14px; font-weight:bold;}

.content{padding:0 20px;margin:10px auto;}
h1{ font-family:Futura_Bookcolor,Verdana, Geneva, sans-serif; font-size:16px;color:#FFF;}

li{list-style:url(img/li.png); margin:20px; line-height:99%}

.li1{list-style:url(img/li.png); margin:20px; line-height:97%}
      
.right{width:235px;   float:left; position:relative; background-color:#3f4b54;}

.box-shadow{background-color:#3f4b54;width:100%;    height:100%;box-shadow: inset 5px 0px 10px  rgba(0,0,0,.4);
}
.img-right{    background:url(img/img-right.png) no-repeat; background-position:right top; width:235px; height:420px; overflow:hidden; position:absolute; top:0; right:0; box-shadow: inset 5px 0px 10px  rgba(0,0,0,.3);}

.black-box{background:#000; width:78%; background-position:right top; position:absolute; right:0; top:330px; padding:20px 10px 5px 20px; color:#FFF; font-family:Tahoma, Geneva, sans-serif;font-size:11px;line-height:102%;
border-radius:10px 0 0 10px;}

.white-box{    position:absolute;right:0;top:540px;width:80%;height:auto;background:#778e9d;    background-size:80% auto;    background-position:top right;padding:8px;color:#FFF;font-family:Tahoma, Geneva, sans-serif;font-size:11px; z-index:20;}

.yur-address{position:absolute;right:0;top:595px;width:77%;height:8%;background-position:top right;padding:15px;color:#FFF;    font-family:Tahoma, Geneva, sans-serif;    font-size:11px; z-index:20;}

.wheel{ background:#3f4b54 url(img/whell.png) no-repeat; width:176px; height:223px; background-position:bottom right; right:0px;  position:absolute; top:550px; }

 

.clear{clear:both;}

.rasporka{height:20px;}

.footer{ margin:-50px auto; background:#000;width:770px; height:50px;    text-align:center;font-size:12px;font-weight:bold;color:#FFF;padding-top:20px;}

А вот такая картинка сейчас получилась.

http://blagotur.kiev.ua/1/index.html

[klierik]

почитай, пожалуйста, в подписи как правильно задать вопрос.

 

[vslukas]

Я прочитал.В общем имеется шаблон: http://blagotur.kiev.ua/1/index.html Необходимо, что бы правая колонка тянулась влево и при этом появлялась картинка.Сейчас все 3 колонки заданы жестко в пикселах.Что необходимо сделать, что бы правая колонка тянулась ?

[Great Rash]

<table width="100%">

  <tr>

    <td>левая колонка</td>

    <td width="300">центральная колонка</td>

    <td>правая колонка</td>

  </td>

</table>

[klierik]

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

 

на какую ширину? px, %?

[vslukas]

ну вообще-то на 100%

[klierik]

то есть правая колонка должна перекрыть центральную и левую, и тем самым занять 100% родителя?

[vslukas]

Нет я не правильно выразился.Правая колонка должна иметь возможность менять размер с 235 до 644 px.Т.е. если потянуть за левую границу правой колонки она имеет возможность растянуться на данную величину.

[klierik]

если потянуть за левую границу

 

что значит "потянуть" ?

[vslukas]

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

[klierik]

http://layout.jquery-dev.net/

http://layout.jquery-dev.net/demos/simple.html