0

Why is float:left CSS property breaking styling? 

<div id="application_header">
  <div>logo</div>
  <div><h5>tagline</h5></div>
</div>

#application_header > div is preventing #application_header background property from being applied because of: float:left? 

.clear  { clear:both; }
.push   { clear: both; height: 20px;}

#application_header { display:block; background-color: #000; }
    #application_header > div { float: left; }

#application_header only accepts background-color: #000; property if float:left is removed... Explanation please...?

MrPizzaFace
  • 7,807
  • 15
  • 79
  • 123

2 Answers2

0

div#application_header has no height because the elements contained within it are floated.

I made a fiddle that demonstrates adding a height to the div:

div#application_header { 
    height: 100px; 
    display:block; 
    background-color: #000; 
    color: #fff 
}

http://jsfiddle.net/YGkw7/

Rather than floating your elements you could set them to inline-block

http://jsfiddle.net/YGkw7/2/

Fo.
  • 3,752
  • 7
  • 28
  • 44
0

The reason your background color is not showing up, is because the #application_header collapses to zero height and width as it only contains floating child elements. You'll want to look into a clear fix solution to have your parent div wrap around the floating child elements.

You can find more info on clear fix solutions at What methods of ‘clearfix’ can I use?

Community
  • 1
  • 1
kevstober
  • 29
  • 4