Резиновая div вёрстка колонками

Пытался решить такую задачу: Тянущийся дизайн из div в 2 колонки
---------------------------------------------------------------
| всё свободное пространство + min-width:400px | width:300px |
---------------------------------------------------------------
Если начать ресайзить браузер, то меняется размер только девой колонки.
Скрол появляется на ширине браузера меньшей 400px+300+px..
Очень напоминает фремы!

1) Идеально получается если использовать CSS3 calc()
div {display:inline-block}
div .left {width:calc(100% - 320px);min-width:400px}
div .right {width:300px}
но как всегда, самые очевидные и прикольные решения срежут 30% браузеров как минимум. В частности Opera (ох уж эта опера бля!) любой версии не поддерживает calc!

2) На сайте оперы есть решение замены
{box-sizing:border-box;width:100%;margin:0 40px}
как аналог
{width: calc(100% - 80px);margin: 0 40px;}
Но то ли я не врубаю, то ли оно работает только с левым отступом (если надо тянущуюся колонку иметь только справа!)

3) Может есть какое-то кроссбраузерное решение на ECMAScript?

А что, если сделать с помощью js и не париться?!

Ну а 3й пункт о чём?!

Хорошо, а как оно может быть не кроссброузерным вообще? jQuery и в путь.
Или ты хочешь готовый шаблон? Тут надо гуглить будет.

=потерто=
Не верно разобрал задачу

Последний раз редактировалось: Joseph (04/05/13 в 01:21), всего редактировалось 4 раз(а)

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

К примеру http://twitter.github.com/bootstrap , можно пересобрать только лайаут под себя. В результате код получится:

Код:

<div class="row-fluid">     <div class="span4"> левая колонка </div>     <div class="span8"> правая колона шире в 2 раза </div> </div>

Код:

<style type="text/css"> div{ margin: 0; padding: 0; } .wrap{ overflow: hidden; min-width: 720px; border: 1px dashed red; } .col{ border: 1px solid red; } .left{ margin-right: 320px; } .right{ width: 300px; float: right; } </style> <div class="wrap">    <div class="col right">right</div>    <div class="col left">left</div> </div>

johndoe2 писал:

Код: <style type="text/css"> div{ margin: 0; padding: 0; } .wrap{ overflow: hidden; min-width: 720px; border: 1px dashed red; } .col{ border: 1px solid red; } .left{ margin-right: 320px; } .right{ width: 300px; float: right; } </style> <div class="wrap">    <div class="col right">right</div>    <div class="col left">left</div> </div>

Вот это правильный подход Смотрю последнее время и охуеваю что современные сайтостроители без jquery и фреймворков уже не могут и пару колонок сделать
Скоро блять чтоб написать Hello world будует требоваться какой нибудь .Net Framework мегабайт на 200

^Krot писал:

Вот это правильный подход Смотрю последнее время и охуеваю что современные сайтостроители без jquery и фреймворков уже не могут и пару колонок сделать

Скоро маразм дойтет до того, что поколение школоло "сайтостроителей" будет считать jquery и bootstrap библиотеками с закрытым кодом, т.к. осилить не смогут

^Krot писал:

Смотрю последнее время и охуеваю что современные сайтостроители без jquery и фреймворков уже не могут и пару колонок сделать

Ты еще больше будешь охуевать, когда тебе понадобится сделать кросбраузерное решение и поддержку мобильных платформ. То, что в jquery, bootstrap идет автоматом или вставкой пары строк кода, для тебя будет изобретением велосипеда.

Я х.з. зачем изобретать велосипеды , если решение уже есть, оно оттестировано тысячами людей и на десятках браузеров. У нас на работе есть такой любитель дизайнер "только чистый код". Все красиво только до той поры, пока не начинаешь набивать данными или изменять структуру. Потом повеситься можно от всех самописный изменений и попыток совместить старый и новый css скрипты. А используй он тот же бутстрап, менялся бы только css внешних стилей, совершенно не трогая лайут и структуру.

johndoe2 писал:

Код: <style type="text/css"> div{ margin: 0; padding: 0; } .wrap{ overflow: hidden; min-width: 720px; border: 1px dashed red; } .col{ border: 1px solid red; } .left{ margin-right: 320px; } .right{ width: 300px; float: right; } </style> <div class="wrap">    <div class="col right">right</div>    <div class="col left">left</div> </div>

Ахуеть!

johndoe2 писал:

Код: <style type="text/css"> div{ margin: 0; padding: 0; } .wrap{ overflow: hidden; min-width: 720px; border: 1px dashed red; } .col{ border: 1px solid red; } .left{ margin-right: 320px; } .right{ width: 300px; float: right; } </style> <div class="wrap">    <div class="col right">right</div>    <div class="col left">left</div> </div>

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

+1 за бутстрап

при min-width забудьте про ие6-7. это не кроссбраузерное решение. садись, 4-

Уже давно можно забить на тех, кто использует IE6-7

когда верстаешь для кого-то - все как один поют "делай чтоб и под ие6 шло..." - не иначе. мысля - "я плачу, пускай ебется". хотя и ебли нету никакой. так, пару фич знать про маргины с паддингами и т.д...
ие6-7 по li юзают до ляма юзеров в день...
я просто не разделяю восторг людей от 3-х строк некроссбраузерного кода.
если для себя - годится. а на продажу - отимеет заказчик...

а вообще забили. людям нравится - пущай наслаждаются

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

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