Склеиваются и всячески безобразничают DIVы

rrejmkhe · October 6, 2009

Идея: div сверху, div снизу, div между ними.

В том, который посередине - контент. В роли контента - img и пара слов текста. Таких "блоков" - 6 колонок по 6 рядов, допустим. body по ширине 780px, каждая колонка, следовательно - 130px.

Соответственно должно отобразиться:

ВЕРХ

БЛОКИ КОНТЕНТА (в каждом блоке - картинка и под ней пара слов текста)

НИЗ

Код:

<style>

#tmbcontent {

background: white;

}

.tmbcontainer {

text-align: center;

width: 130px;

float: left;

font-size: 14px;

}

.tmbimg {

display: block;

margin-left: auto;

margin-right: auto;

}

</style>

<div style="background:red;">Upper DIV</div>

</div>

<div style="background:blue;">Lower div</div>

</body>

ПРОБЛЕМА:

Вместо вышеописаного желаемого поведения получается, что нижний div визуально начинается от верхнего и заканчивается там, где должен, сами контейнеры с картинками вродебы на своих местах, но при этом средний див #tmbcontent - его какбы нет вообще, он не даёт свой background:white на контейнеры с контентом. Вместо этого - эффект, описаный вначале абзаца.

У меня сейчас мозг взорвется. Помогите, пожалуйста. Прилагаю скриншот безобразия.

P.S. Если добавить ещё один контейнер с контентом, который появлятся на следующем ряду, как и предполагалось, то он "выскакивается" за нижний слой, т.е. нижний слой не двигается ниже, как должно быть. Т.е. очевидно, что действительно, прилип к верхнему

psywalker · October 7, 2009

div#tmbcontent { overflow: hidden;}

Sign In

Склеиваются и всячески безобразничают DIVы

Question

rrejmkhe

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information