Как правильно настроить данную сетку?

Question

[freeman0204]

Возникла проблема построения сетки на 2 колонки. Есть container 940px (получается эти 940px для внутренних блоков 100%) В левой части есть блок в котором находятся 2 блока nav-main-left и nav-slider-right. А справа находится div class="bar" (не в div class="main" ) .
Вопрос в том как сделать так что бы div class="main" был 80% от ширины container который 940px а div class="bar" 20%. А в свою очередь 2 блока nav-main-left и nav-slider-right которые находятся в div class="main" занимали 20% и 80% соответственно, только 100% ширины для них было не от контейнера 940px а от div class="main"?

Comments

[Ivanq]

Не могли бы Вы привести код и сформулировать понятнее?

| Есть container 940px, в левой части есть блок в котором находятся 2 блока,
| а справа находится div class="bar" (не в div class="main"). Как сделать так что
| бы div class="main" был 80% от ширины container который 940px а
| div class="bar" 20%. 2 блока nav-main-left и nav-slider-right которые находятся
| в div class="main" занимали 20% и 80% соответственно, только 100% ширины
| для них было не от контейнера 940px а от div class="main"?

[dk-web]

сделайте пример на jsfiddle - так быстрее получите разумный ответ..

[freeman0204]

dk-web: Код codepen.io/anon/pen/mewYqK только вот запутался брать bar в container или нет? Вот что должно выйти screenshot.ru/25dfab8f3680570af09af880f9424327 я спрашивал немного о другом недавно. Но пока не понял...

[freeman0204]

Ivanq: Код codepen.io/anon/pen/mewYqK только вот запутался брать bar в container или нет? Вот что должно выйти screenshot.ru/25dfab8f3680570af09af880f9424327 я спрашивал немного о другом недавно. Но пока не понял...

Answer 1

[Ivanq]

jsfiddle.net/Ivanq/oykte7xf

Comments

[freeman0204]

У вас нет container и в блоке main должно быть расположено только 2 блока а 3 отдельно и у них должна быть указана ширина.

[Ivanq]

Артур Черешнюк: а зачем? нельзя сверстать по-другому? ширину - да, но вложенность?

[freeman0204]

Ivanq: screenshot.ru/a62a8af4b8b10752097d404ff26212c2 так должно выглядеть. В left и right свой блок main а блок bar отдельно. И блок main и блок bar помещаются в блок container который 940 px а в main вложены left и right.

[Ivanq]

Артур Черешнюк: jsfiddle.net/Ivanq/oykte7xf/2

[freeman0204]

Ivanq: Ivanq: ответ здесь codepen.io/anon/pen/KdqLBw а то, в коментарии проблемы с отображением тегов.

[Ivanq]

Артур Черешнюк: я бы ставил нефиксированную ширину и высоту, а для внутренних элементов width: 30% Но если хотите, давайте jsfiddle.net/Ivanq/oykte7xf/3

[freeman0204]

Ivanq: Что то не совсем понял про 30% и нефиксированную ширину и высоту чего именно?

[Ivanq]

Артур Черешнюк: jsfiddle.net/Ivanq/oykte7xf/4

[freeman0204]

Ivanq: По поводу высоты не совсем понятно нужно указывать min-height т.е. минимальная например 200 px а если контента будет больше чем на 200 px то контейнер по высоте растянется? А если высота фиксирована то контент выпадет?

[Ivanq]

Артур Черешнюк: ну... да, нужно min-width

[freeman0204]

Ivanq: спасибо!

Answer 2

[Орзубек Рахимов]

Скиньте весь css код

Comments

[freeman0204]

Css пока не писал в этом примере так как не пойму правильна ли структура html. Код html codepen.io/anon/pen/mewYqK только вот запутался брать bar в container или нет? Вот что должно выйти screenshot.ru/25dfab8f3680570af09af880f9424327 я спрашивал немного о другом недавно. Но пока не понял...

[Орзубек Рахимов]

div class="main" был 80% от ширины container который 940px

80% от 940px = 752px

[freeman0204]

Орзубек Рахимов: screenshot.ru/a62a8af4b8b10752097d404ff26212c2 так должно выглядеть. В left и right свой блок main а блок bar отдельно. И блок main и блок bar помещаются в блок container который 940 px а в main вложены left и right.