CSS and div problem

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=开发者_JAVA百科"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.

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; }).

Try this:

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

#headerAbs .header1{
    float: left;
}

#headerAbs .header2{
    float: right;
}



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

Previously the div had no height while the two images were in it because they are positioned using float. It's a weird quirk of CSS but after some practice you will get used to it. You can see the difference for yourself if instead of setting the background-color, try setting the border. You will notice that until you add the div to clear both, the border will just look like a line because the div has no height.

Here's the link where I first learned about this strange problem: http://www.quirksmode.org/css/clearing.html

Edit

I decided to just take quick screen shots and show you myself for anyone who might come across this page through google. I modified the source of the page to look like the following, and got this output:

/*Header*/
#headerAbs{
/*    background-color: #63554c; */
    border: solid 5px red;
}

#headerAbs .header1{
    float: left;
}

#headerAbs .header2{
    float: right;
}

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

Then, after implementing the fix I suggested above, here's the new result:

/*Header*/
#headerAbs{
/*    background-color: #63554c; */
    border: solid 5px red;
}

#headerAbs .header1{
    float: left;
}

#headerAbs .header2{
    float: right;
}

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

Hope that helps!

I usually add overflow: hidden to a parent element. In your case it will be:

#headerAbs {
    overflow: hidden;
    background-color: #63554c;
}