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

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.