Question

in my web application I have this css rules:

/*Header*/
#headerAbs{
    background-color: #63554c;
}

#headerAbs .header1{
    float: left;
}

#headerAbs .header2{
    float: right;
} 

and this HTML code:

<div id="headerAbs">
     <img class="header1" src="../../../../imagenes/header.jpg" alt="ARVC-UMH" />
     <img class="header2" src="../../../../imagenes/logoUsal.png" alt="ARVC-UMH" />
</div>

My problem is that the <img> elements are well styled (if I change the float, they move), but the <div> background is not changing.

I’m using firebug, and if I inspect the element, <div id="headerAbs"> is not highlighted, that means that for some reason is not taken in mind. The same problem with another element in my application.

Am I missing something?

Thanks in advance.

Answer 1

All elements inside your div are floated, so your div has null height. You still can:

• Set explicit value for CSS height property of your div;
• Add clear: both; block inside your div after floated elements;
• Flush your floated elements (so called float context) by adding overflow: hidden to the parent of them (#headerAbs { overflow: hidden; }).