CSS Inheritance Problem

[joedub]

Hello,

I'm trying to get away from table based layout, but haven't been able to find any info on the following problem I'm having... <url removed> shows the problem and full source.

The issue im having is with the 'form_bar' div. I can't get the background colour to display in opera or firefox, and could only get it working in IE7 by adding 'width:100%'. Any help much appreciated!

 <div id="wrapper">
 
 <!-- start header -->
 <div id="header">
 
 <div id="title_wrap">
 <div id="title1"><h1 class="font_1">Uktvfood.com</h1></div>
 <div id="title2"><h4 class="font_1">Internet Made Easy</h4></div>
 </div>
 
 <div id="banner"><img src="/images/parking/banner.gif" width="468" height="60"></div>
 
 <div id="form_bar">
 <div id="home_div">home</div>
 <div id="form_div">form</div>
 </div>
 
 </div>
 <!-- end header -->
 
 
 <!-- start main -->
 <div id="main">main</div>
 <!-- end main -->
 
 
 <!-- start footer -->
 <div id="footer">footer</div>
 <!-- end footer --> 
 
 </div>

/* colour scheme */
body{ background-color: #4D4D4D; color: #333333; }
.font_1{ color: #102935; }
#wrapper{ background-color:#FFFFFF; }
#form_bar{ background-color: #102935; }
#footer{ background-color: #102935; color: #FFFFFF; }
/* unique elements */
#wrapper{ width: 770px; margin: 0 auto; }
 #header{}
 
 #title_wrap{ float: left; padding-left: 14px; padding-top:25px; padding-bottom:16px; }
 #title1{}
 #title2{ text-align: right; }
 
 #banner{ float: right; padding-top: 5px; padding-right: 5px; }
 
 #form_bar{ clear: both; width: 100%; }
 #home_div{ float: left; color:#FF0000; margin:5px; }
 #form_div{ float: right; color:#FF0000; margin:5px; }
 
 #main{ clear: both; }
 
 #footer{ clear: both; padding: 5px; }

[edited by: encyclo at 4:46 pm (utc) on Mar. 29, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]

[Fotiman]

form_bar has only 2 children, both of which are floated. Floating an element takes it out of the flow. In order to get form_bar to "contain" the children, you could either:

a. Float form_bar as well
b. Add something below the 2 floats that clears the floats.

For example:

<div id="form_bar">
<div id="home_div">home</div>
<div id="form_div">form</div>
<br class="clear">
</div>

and then in your css:

br.clear { clear: both; }

[joedub]

Yep that got it, cheers for the help...