HTML + CSS -взаимное изменение размеров div-ов. Как реализовать?

Question

[sudo rm -rf /]

Некоторое время назад начал обучаться web-дизайну, в частности верстке сайтов. Но во время очередной верстки столкнулся с одной проблемой:


Эти два блока должны быть, во-первых, одной высоты, во-вторых, вертикальный размер блоков должен взаимно изменяться, когда парный блок становится больше другого. Иначе говоря, если увеличить кол-во текста в блоке так, что по размерам он станет больше парного, то размер этот парный блок должен стать того же размера, что и переполненный. И выглядеть это должно примерно так:


Возможности строго ограничены ресурсом, на котором сверстанное "чудо" будет блистать (одна из энциклопедий wikia):

• HTML (неполный - только основное форматирование, блоки div и собственные wikia-вские теги. таблицы есть, при чем к ним можно применять стили, но кодить их - весьма муторное дело)
• СSS (чистый)
• JS (но кол-во скриптов, которые можно добавить, ограниченно. как же могут возникнуть проблемы с повсеместным использованием)
• Возможности загружать сторонние файлы (помимо изображений и видео) нет

Вообщем, картина не радует(

Вот код:
HTML

<div class="info">
            
            <div class="statement" align="center" style="float: left">
                <div class="text"> Места спавна </div>
            </div>
            
            <div class="statement" align="center" style="float: right">
                <div class="text"> Военные локации </div>
            </div>
        
            <div class="clr"></div>
                </div>

CSS

.info{
    min-height: 30px;
    width:250px; 
}

.info .statement{
    width: 110px;
    min-height: 100%;
}

И, собственно, сам вопрос - как это можно реализовать?

P.S. Код и скриншот - только часть всего пирога. Конечная верстка представляет из себя инфобокс. Если появится необходимость лицезреть все чудо целиком (включая код), могу это устроить)

P.P.S. Понимаю, что верстка убога, но занимаюсь этим не так уж и много времени.

Answer 1

[Lisonok]

<div class="info">
            <div class="statement">
                <div class="text"> Места спавна </div>
            </div>
            <div class="statement">
                <div class="text"> Военные локации </div>
            </div>
</div>

.info{
    min-height: 30px;
    display: table;
    width: 100%;
}

.info .statement{
    text-align: center;
    vertical-align: middle;
}

Answer 2

[Дима Паутов]

1) Используем таблицу
2) Flex-box
3) Min-Height
4) Js (перебераем массив элементов и ищем самый высокий. После добавляем эту высоту всем)

Что выбирать из этого, решать вам!

Comments

[sudo rm -rf /]

Спасибо, второй вариант помог решить проблему.

Answer 3

[xmoonlight]

.info .statement .text {
min-height:100%;
}

Comments

[sudo rm -rf /]

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

[xmoonlight]

display:inline-block; попробуйте добавить везде

[sudo rm -rf /]

Пробовал - безрезультатно.

Answer 4

[Рустамка Воронцов]

Если Вам нужно использовать равные блоки, используйте table

<table class="info">
      <tr>
            <td class="statement" >
                Места спавна
            </td>          
            <td class="statement">
                 Военные локации
            </td>

table {
  ..
}
table tr {
    min-height: 100px;
}
table tr td{
    vertical-align: middle;
}

Большая часть хороших верстальщиков используют таблицы для получения ровных блоков, да и изменению лучше поддаются, без float: left: display: inline;

Comments

[Igor Lanko]

Используйте таблицы! Долой будущее! Вернемся в каменный век! Ура, товарищи!