Правый контейнер падает

[m1n1vv]

Привет. Как сделать, чтобы правый контейнер не падал? Если текст в одну строку, то все в порядке, а если 2 и больше, то падает. Или проще сделать через table?

 

CSS:

.tdm {width: auto; font-size: 13px; padding-right: 15px;}    .type-of-material {width: 100%; height: 85px; background: #620; margin: 10px 0 0 0;}        .type-of-material-cover {width: 116px; height: 85px; background: #fff; float: left;}        .type-of-material-info {width: 100%; background: #904; float: right;}

HTML:

<div class="tdm">    <div class="type-of-material">        <div class="type-of-material-cover"></div>        <div class="type-of-material-info">            51-я пехотная группа UNIFIL сил обороны Ирландии в ходе учений "Mission Readiness Exercise" в Glen of Imaa, Ирландия, ноябрь 2015 года        </div>    </div></div>

Edited December 20, 2015 by m1n1vv

[abrahadabra]

width: 100% означает именно ширину в 100% от родителя. Естественно, этот блок размещается там, где такая ширина доступна, то есть под левым блоком. Убирайте эту ширину, да и float:right убирайте. Если нужно, чтобы колонка оставалась колонкой с фоном, можно позволить себе грязный хак overflow: hidden.

 

А самое лучшее — не страдать ерундой, а сделать всё через flexbox, с ним такие вещи делаются элементарно.

[m1n1vv]

width: 100% означает именно ширину в 100% от родителя. Естественно, этот блок размещается там, где такая ширина доступна, то есть под левым блоком. Убирайте эту ширину, да и float:right убирайте. Если нужно, чтобы колонка оставалась колонкой с фоном, можно позволить себе грязный хак overflow: hidden.

 

А самое лучшее — не страдать ерундой, а сделать всё через flexbox, с ним такие вещи делаются элементарно.

 

Спасибо