Проблема создания столбцов равной высоты в CSS

Question

Я использовал примеры здесь , чтобы настроить веб-страницу с колонками одинаковой высоты (используя только HTML и CSS), и она работает относительно хорошо. Здесь - это полный код HTML и CSS, который я использую.

Вопросы новичкам:

(1) Как вы можете видеть, я попытался сделать левый столбец (id = "column_bottom") белым (# f5f5f5) фоном с черным текстом, а правый столбец (id = "content_bottom") - черным фон с белым (# f5f5f5) текстом, но одна сторона всегда перекрывает другую. Что я могу сделать, чтобы сделать это, что я хочу?

(2) Кроме того, вы можете видеть в CSS, что я определил шрифты и цвета фона для тела, но как-то это не проходит, что мне делать?

Спасибо!

P.S. Я ищу чистое решение HTML / CSS и предпочитаю не использовать JavaScript.

Answer 1

Ты рядом. В своем коде просто измените свой стиль на сами столбцы, например:

#content_bottom {
    color: #f5f5f5;
    background:#000000; /* right column background colour */
}

#column_bottom {
    color: #000000;
    background:#f5f5f5; /* left column background colour */
}

Answer 2

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

html:

<div class="container">
    <div class="box">blah</div>
    <div class="box">blah<br/><br/>blah</div>
    <div class="clear"></div>
</div>

css:

.container { position:relative; width:100px; border:1px solid red; }
.box { position:relative; float:left; width:40px; border:1px solid blue; }
.clear { clear:both }