Как сделать блок на 100% ширины, но при этом контент в блоке соблюдал свою ширину?

Question

[Никита Нафранец]

В общем свой вопрос я уже изложил в название.
Есть 2 блока, которые находятся в блоке. Нужно, чтоб эти 2 блока занимали 100% ширины, но контент в этих блоках должен иметь суммарную фиксированную ширину и они должны стремится к друг к другу и при этом должны быть одинаковой высоты.

Блок в котором находятся эти 2 блока имеет ширину 100%, но нужно, чтоб контент не выходил за суммарную max-width 1040 и чтоб это было централизовано и при этом каждый блок должен иметь свой цвет.
Когда начал это делать, казалось просто. Но из за max-width блоки были не превышали размер 1040px и это все выглядело как 2 кубика на белом фоне. А нужно, чтоб и они всю выделенную ширину перекрашивали, а не только 1040px.
https://jsfiddle.net/z944tnvv/embedded/result/
Вот, что у меня выходит, а как сделать, чтоб цвет фона занимал всю ширину не знаю, но чтоб контент внутри блоков не заходил 1040px и при этом поддерживать одинаковую высоту тоже не получается, получается только с table; table-cell
Извините за тавтологию и заранее спасибо.

Comments

[abbrakadabbra]

не понимаю, а если элементы внутри главного дива с цветом засунуть ещё в один див, а ему задать постоянный width?

Answer 1

[Сергей delphinpro]

На самом деле довольно простая задачка

jsfiddle.net/DelphinPRO/y8xtoucn

Comments

[Никита Нафранец]

Спасибо, я flex ни разу не использовал. Хоть и читал о нем, но не понял как его использовать.

[Сергей delphinpro]

Dimensi: Там суть не во флексе. это просто способ реализации, который я выбрал. Главное - сам принцип размещения блоков.

[Никита Нафранец]

Сергей: и в чем способ реализации? как это по другому реализовать? в чем принцем? Создать блок, в нем 2 блока, а внутри них 1 общий блок ?

[Сергей delphinpro]

Dimensi: два блока по 50% ширины. они будут занимать всю ширину браузера.
Внутри каждого - по блоку с шириной, равной половине ширины, по которой вы хотите центрировать весь контент. В левом блоке внутренний блок прижимаем к правому краю, в правом, соответственно, к левому.
Мне казалось, это довольно очевидным из моего кода...
По другому можно реализовать как угодно - флоаты, таблицы строковые блоки.
Я бы выбрал табличное представление блоков (display:table;), если флекс по каким-то причинам не подходит.

Answer 2

[Даниил Сорокин]

Для равной высоты используйте плагин equalHeight.jquery

Comments

[Сергей Карвасарный]

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

[Сергей Карвасарный]

может для маленького проекта и библиотека подойдет но нужно экономить) стараться не нагружать.

[Сергей Карвасарный]

MaxKorz: а так на 6, разницы нет еще скажи?

Answer 3

[Сергей Карвасарный]

jsfiddle.net/qexr1506/1 что-то типа того, теперь загугли как сделать колонки одинаковой высоты, вроде везде пишут про 3 способа точно, один точно помню делают подложку на общий блок т.е в твоем случаи бело серый фон на общий блок и все.