Background-color puzzle on CSS for heading/title div.

Question

I have the following title div setup, but when only the leftmost div has content, the red background for the title is not applied. Why is this, as the 'title' div has content, and its background should be red.

Head stuff:

<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>

Body stuff:

<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

You might want to clear the floats after the last div.

Answer 2

When an element is floated (like your .title-segment-left), it's parent's layout does not account for the floated element. That's causing your #title to collapse to 0x0 when it has no other content than the floated element. Since it's 0x0, the background doesn't show.

Here's a tutorial on floats that might be helpful.

Answer 3

Use firebug and confirm that when you only have floated child elements, the parent's height collapses to "nothing", and you'll understand your problem.

You can hack-around with adding a last empty div without content and that clears left. So, it goes behind the left-floated divs, and forces the parent div to stretch. Like so:

<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>