CSS background puzzle for header / div header
I have the following setting for the header div, but when only the leftmost div has content, the red background for the header is not applied. Why is this, since the "title" div has content and its background should be red.
Head:
<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:
<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>
a source to share
When an element is moved (like your .title-segment-left), its parent layout ignores the floating element. This forces your #title to collapse to 0x0 when it has no other content other than the floating point element. Since it is 0x0, no background is displayed.
Here's a tutorial on floats that might be helpful.
a source to share
Use firebug and confirm that when you only float the children, the parent's height collapses to "nothing" and you will see your problem.
You can hack by adding the last empty div with no content and which will clear on the left. So it goes behind the left floating divs and causes the parent div to stretch. For instance:
<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>
a source to share