Цветная головоломка на CSS для заголовка / заголовка

Question

У меня есть следующая настройка div заголовка, но когда только у самого левого div есть содержимое, красный фон для заголовка не применяется.Почему это так, так как div 'title' имеет содержимое, а его фон должен быть красным.

Материал заголовка:

<title>Into the Breech</title>
<link href="Styles/Reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    body { font-family: Arial, Sans-Serif, System; }        
    #title { background-color: #F71831; font-weight: bold; }                    
    .title-segment-left { float: left; }
</style>

Материал корпуса:

<div id="title">
    <div id="menu-title" class="title-segment-left" style="width: 200px;">
        Menu
    </div>
   <div id="main-title" class="title-segment-left" style="width: auto;">
        Home Page
    </div>
    <div id="right-title" style="float: right;">
        Provantage Media Management System
    </div>
</div>

Answer 1

Когда элемент является плавающим (например, ваш .title-сегмент-слева), его родительский макет не учитывает перемещаемый элемент. Это приводит к тому, что ваш #title падает до 0x0, когда у него нет другого содержимого, кроме плавающего элемента. Поскольку это 0x0, фон не отображается.

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

Answer 2

Возможно, вы захотите очистить поплавки после последнего деления.

Answer 3

Используйте firebug и убедитесь, что когда у вас есть только плавающие дочерние элементы, высота родителя падает до «ничего», и вы поймете свою проблему.

Вы можете взломать, добавив последний пустой div без содержимого, и это очистит левый. Таким образом, он идет за левосторонним div и заставляет родительский div растягиваться. Вот так:

<div id="title">
    <div id="menu-title" class="title-segment-left" style="width: 200px;">
        Menu
    </div>
   <div id="main-title" class="title-segment-left" style="width: auto;">
        Home Page
    </div>
    <div id="right-title" style="float: right;">
        Provantage Media Management System
    </div>
    <div style="clear: left;"></div>
</div>