Как сверстать такой блок?

Question

[Губернатор]

Всем привет!
Не получается сверстать блоки как на рисунке:

Проблема в том что красный блок не имеет фиксированного размера, а растягивается на 100%.
Внутри него, два блока по бокам, имеют фиксированный размер, например 300рх, блок по центру содержи основную информацию, и должен всегда занимать всю оставшуюся ширину красного блока.
Пробовал боковые через флоат, а основной 100%, но тогда боковые блоки переходят на другую строку.
Пробовал через таблицы. но с таблицами тоже понт, 1) у них нет margin, 2) блок по центру, не может занять 100% оставшегося места, а место справа пустует если центральный блок имеет мало контента.
Если просот display:inline-block, при маленьком разрешении, блоки падают.

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

Comments

[Андрей Хохлов]

Рассматривайте flex-box

[Губернатор]

Андрей Хохлов, а как сейчас с поддержкой флексбокса? А если кто нибудь сидит на Win XP, и использует старенький эксплорер?

[Анатолий]

Губернатор, чем меньше мы будем подстраиваться под ишака, тем быстрее он уйдет с рынка. Лично я вообще пользователей этого "чуда" не пускаю на сайт, пока нормальные браузер не скачают. Ибо нефиг.

А так все нормальные браузеры его поддерживают.

[Андрей Хохлов]

Губернатор, уже почти два года использую флексы, ie10+ поддерживается.
Официально сама Майкрософт не поддерживает ниже 11 если не ошибаюсь. Даже маркетинговый мутант Bitrix дропнул поддержку 10- с прошлого года.

[Ankhena]

а как сейчас с поддержкой флексбокса? А если кто нибудь сидит на Win XP, и использует старенький эксплорер?

Если это ваша целевая аудитория, то придется делать по старинке.
Если нет, то флексы самое то.

Answer 1

[e5ash]

<style>
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.row{
			font-size: 0;
		}
		.col{
			display: inline-block;
			vertical-align: top;
			font-size: 16px;
		}
		.wrapper__left, .wrapper__right{
			width: 300px;
		}
		.wrapper__middle{
			width: calc(100% - (300px * 2));
			padding-left: 10px;
			padding-right: 10px;
		}
		.wrapper__title{
			font-size: 20px;
			font-weight: 700;
		}
	</style>

<div class="wrapper row">
		<div class="wrapper__left col">
			<div class="wrapper__title">Left block</div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa molestias ratione, neque eligendi provident, hic illo! Ullam minus optio laboriosam, sunt, sapiente quia deserunt obcaecati consequuntur, molestias voluptatibus suscipit? Pariatur.
		</div>
		<div class="wrapper__middle col">
			<div class="wrapper__title">Middle block</div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur commodi, expedita labore veniam placeat excepturi soluta nostrum, dignissimos magni repellat iure reprehenderit fugiat tempore voluptatem facilis ducimus architecto explicabo, nobis ipsa nemo. Quos qui, dolorem iusto soluta aperiam voluptatum esse aliquam et repellendus optio omnis expedita modi ipsa eos commodi sapiente iure vel in quam sequi voluptates ad reiciendis dolores. Ipsa fugiat ullam officia quae maiores recusandae quo nemo, provident nesciunt rerum ut distinctio accusantium doloribus voluptatem optio nisi in officiis quasi iusto. Temporibus, nisi earum necessitatibus nam voluptatem amet, incidunt quasi eos cumque error cum beatae dolor! Placeat, quos.
		</div>
		<div class="wrapper__right col">
			<div class="wrapper__title">Right block</div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa molestias ratione, neque eligendi provident, hic illo! Ullam minus optio laboriosam, sunt, sapiente quia deserunt obcaecati consequuntur, molestias voluptatibus suscipit? Pariatur.
		</div>
	</div>

Comments

[Павел Корнилов]

https://codepen.io/anon/pen/PEpVxg

Answer 2

[Максим]

Здесь все виды вёрстки кроме Grid layout, я всё подписал что бы было ясно как это делается

Answer 3

[kn1ght_t]

нужно на флексе такое делать: https://jsfiddle.net/mmo2f3fa/

либо float: https://jsfiddle.net/mmo2f3fa/1/