VPF::Обрамляющий DIV перестает учитывать высоту

Royan

Дата 15.3.2009, 03:24 (ссылка)

(нет голосов)

Загрузка ...

Dreamer

Профиль
Группа: Участник Клуба
Сообщений: 1708
Регистрация: 14.9.2002
Где: Лондон

Репутация: нет
Всего: 15

У меня есть следующий дизайн меню в три колонки:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=utf-8" />
<TITLE>Тест</TITLE>
<STYLE type="text/css">
#box{
    width: 600px;
    border: 1px solid black;
    background-color: #DDDDDD;
}

.menuColumn {
    width: 33%;
    float: left;
}
</STYLE>
</HEAD>
<BODY id="body">
    <DIV id="box">
        <DIV class="menuColumn">
            <DIV class="menuItemHeader">Menu1</DIV>
            <SPAN class="menuItem"><A href="yandex.ru">Yandex</A></SPAN><br/>
            <SPAN class="menuItem"><A href="google.ru">Google</A></SPAN>
        </DIV>
        <DIV class="menuColumn">
            <DIV class="menuItemHeader">Menu2</DIV>
            <SPAN class="menuItem"><A href="yandex.ru">Yandex</A></SPAN><br/>
            <SPAN class="menuItem"><A href="google.ru">Google</A></SPAN>
        </DIV>
        <DIV class="menuColumn">
            <DIV class="menuItemHeader">Menu3</DIV>
            <SPAN class="menuItem"><A href="yandex.ru">Yandex</A></SPAN><br/>
            <SPAN class="menuItem"><A href="google.ru">Google</A></SPAN>
        </DIV>
    </DIV>
</BODY>
</HTML>

Задача сделать так чтобы внешний DIV#box учитывал высоту входящих в него элементов меню и нормально рисовал рамку вокруг них, одним словом вел бы себя так как если бы у класса menuColumn не было свойства float: left;

Я не знаю возможно ли это, но было бы здорово узнать как этого добиться если же это все-таки возможно...

PS
Проблема наблюдается на FF, Opera, Safari, а вот в IE все вроде нормально

--------------------

Открыта вакансия Junior Java Developer'а в нашем лондонском офисе, подробнее можно узнать здесь

WebDisaster

Дата 15.3.2009, 08:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Цитата(Royan @ 15.3.2009, 03:24

)

Я не знаю возможно ли это, но было бы здорово узнать как этого добиться если же это все-таки возможно...

Возможно, если #box{float: left;}

ksnk

Дата 15.3.2009, 09:48 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Royan, Добавить в #box еще один div
<div style="clear:both;height:1px;overflow:hidden;"></div>?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »