Проблема с div-ами...

[Mark Ghaphes]

Есть некоторая задача:

"Сделать два резиновых столбца. Первый — 20% по ширине, второй — 80%, между ними расстояние 20 пикселей, расстояния от краёв страницы слева и справа 10 пискелей. Без использования таблиц и javascript."

Мой вопрос такой:

Как сделать расстояние 20px. между колонками, если 20%+80%=100% т.е. вся доступная ширина, которая исключает еще какие-либо размеры вроде "20px".

[troll]

Потому что у вас в стилях так задано. Ширина сайдбара - 10px+20%, ширина контента - 10px+80%-20px.

[runet]

10px относятся к тегу

body

и к

.sidebar

не имеет никакого отношения.

[Nekromancer]

Я чтот не понял тогда, как вы ходите уместить в 100% экрана 80%+20%+40px ? Тут либо появляется скрол, либо какой то блок теряет 40px либо кто то не учил математику.

[troll]

Nekromancer, еще один вариант забыли - кто-то невнимательно читает.

runet, сверху на картинке - ваши блоки:

Edited September 21, 2011 by troll

[Nekromancer]

Nekromancer, еще один вариант забыли - кто-то невнимательно читает.

Ну и какой же?

[troll]

Хм, раз такое дело, объясню подробнее. В коде runet

1. ширина сайдбара = 10px + 20%
   
2. ширина контента = 10px + 80% - 20px = 80% - 10px (так как 10px - 20px = -10px)
   
3. общая ширина = ширина контента + ширина сайдбара = 10px + 20% + 80% - 10px = 20% + 80% (так как 10px - 10px = 0) = 100%
   

[Nekromancer]

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

П.С. Кстати отнятие 20пк от блока в 20% и отнятие 20к от плока в 80% не есть пропорция. Для пропорции нужно отнять 80пк от блока в 80%.

[troll]

Прошу прощения, я не понял сразу, о чем речь. Условие изначально не очень корректно сформулировано, это да, но мы вроде еще на первой странице сошлись на том, что должны в итоге получиться 2 блока как бы с отступами 10 пикселей по краям. При этом нарушается пропорция 1:4 для областей содержимого блоков, а для самих блоков она сохраняется.

Edited September 21, 2011 by troll

[sigma77]

http://jsfiddle.net/PcdHU/1/

Но блоки никогда при таком условии не будут равны 20% и 80% от ширины экрана.

Edited September 21, 2011 by sigma77

[SelenIT]

Пока ничего лучше этого не придумал. Думаю дальше

[Justnewone]

Такая же ситуация во всех браузерах. Что не так?

Можно в обертку засунуть бэкграунд, в 1 пиксель высотой и шириной в паддинг, цветом в бекграунд и будет счастье.

[Delka]

runet

У вас 20px расстояния между блоками украдены у 80%-тной колонки, соотношение 20%/80% - нарушено.

Я чтот не понял тогда, как вы ходите уместить в 100% экрана 80%+20%+40px ? Тут либо появляется скрол, либо какой то блок теряет 40px либо кто то не учил математику.

"impossible is nothing" ©

http://jsfiddle.net/PcdHU/1/

Но блоки никогда при таком условии не будут равны 20% и 80% от ширины экрана.

теплее

Пока ничего лучше этого не придумал. Думаю дальше

Красивое решение, засчитывается!

Но ты по сложному пути пошёл, т.к. не используешь wrapper. Кстати мой вариант без wrapper отличается, спасибо за альтернативное решение.

Эх, вот решите сейчас задачку полностью, а вакансия-то незакрыта, резюме ещё идут))

[sigma77]

Delka,

Ну, если ты в теме. Можешь по-человечески объяснить 20% от чего?? 80% от чего??

[SelenIT]

ты по сложному пути пошёл, т.к. не используешь wrapper.

Использую body, неявно. И с несплошным фоном проблемы, с border:transparent... без CSS3 (background-clip) удержать фон в границах padding-box у меня не вышло. А можно всё-таки труЪ-вариант подсмотреть,в личку или на мыло selenit(гав)mail.by?..

[sigma77]

Еще вариант: http://jsfiddle.net/PcdHU/37/

[SelenIT]

sigma77, вау, круто! Действительно просто, как всё гениальное! Вот только padding этим же блокам без CSS3 уже не задать, но это мелочи.

[Nekromancer]

runet

У вас 20px расстояния между блоками украдены у 80%-тной колонки, соотношение 20%/80% - нарушено.

Я чтот не понял тогда, как вы ходите уместить в 100% экрана 80%+20%+40px ? Тут либо появляется скрол, либо какой то блок теряет 40px либо кто то не учил математику.

"impossible is nothing" ©

Вы понимаете, что вы не правильно изначально ставите задачу? 20пк украдено из 80ти процентов... А нельзя было сразу написать, что блоки должны были иметь соотношение 1 к 4 и при этом у каждого блока должен быть отступ в 10 пикселов? А то 20% от страницы, 80% от страницы ...

[Delka]

Delka,

Ну, если ты в теме. Можешь по-человечески объяснить 20% от чего?? 80% от чего??

Ну я её придумал ещё в 2009, когда в прошлый раз искал верстальщика.

20% и 80% от блока-родителя. Можно считать что блоки должны соотносится как 1:4.

SelenIT

Отправил решение на мыло.

Вернулся на форум, а тут уже правильный ответ есть)

Вы понимаете, что вы не правильно изначально ставите задачу? 20пк украдено из 80ти процентов... А нельзя было сразу написать, что блоки должны были иметь соотношение 1 к 4 и при этом у каждого блока должен быть отступ в 10 пикселов? А то 20% от страницы, 80% от страницы ...

У блоков не обязан быть отступ в 10px.

Смотрите ниже правильное решение, там у блоков так и написано: width: 20% и width: 80%.

Еще вариант: http://jsfiddle.net/PcdHU/37/

Да, это оно, правильное решение.

Даже, короче на одно правило, чем я сам написал - http://delka.name/verstka/2-columns-fixed-margin.html

Правда по условиям задачи между блоками должно быть 20px, а не 10, но не суть важно, идея - правильная.

Всё, спалили тему

[Nekromancer]

Вы понимаете, что вы не правильно изначально ставите задачу? 20пк украдено из 80ти процентов... А нельзя было сразу написать, что блоки должны были иметь соотношение 1 к 4 и при этом у каждого блока должен быть отступ в 10 пикселов? А то 20% от страницы, 80% от страницы ...

У блоков не обязан быть отступ в 10px.

Смотрите ниже правильное решение, там у блоков так и написано: width: 20% и width: 80%.

Фактически нет, но визуально у них по 10 пикселов отступа. (В примере по середине по пять, но таки да, не важно)

Да, я вижу пример, спасибо. Но этот пример ради примера. Если данный подход использовать не в body, а где то во внутренних блоках придётся подстраивать всю структуру под выступающий блок из родителя.

[Delka]

Nekromancer

И фактически у них тоже строго 20% и 80%. Если сделать скриншот и замерить размеры - всё сходится.

Да, это задача ради задачи, так и должно быть, её цель - оценить кандидата.

[Nekromancer]

Nekromancer

И фактически у них тоже строго 20% и 80%. Если сделать скриншот и замерить размеры - всё сходится.

Ну тут я и не спорю, понятно что у них ширина 20% и 80% по отношению к body, к html конечно нет.

[SelenIT]

Ради прикола еще вот тривиальный вариант (без CSS3, но зато и без поддержки старых IE

[Delka]

Ради прикола еще вот тривиальный вариант (без CSS3, но зато и без поддержки старых IE

Что интересно - почему-то никто из приславших резюме не предложил такое решение Хотя на поверхности, же.

Edited September 21, 2011 by Delka