Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Обрамляющий DIV перестает учитывать высоту


Автор: Royan 15.3.2009, 03:24
У меня есть следующий дизайн меню в три колонки:

Код

<!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 все вроде нормально

Автор: WebDisaster 15.3.2009, 08:40
Цитата(Royan @  15.3.2009,  03:24 Найти цитируемый пост)
Я не знаю возможно ли это, но было бы здорово узнать как этого добиться если же это все-таки возможно...


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

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)