Question

HTML structure

<div id="header_div">
    <a href="#">
        <img width="250" height="75" src="./images/header_logo.png">
    </a>
</div>

CSS:

:hover{
outline:1px dotted red;/*this line help us to actually see*/
}

#header_div{
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border:1px solid #477BA3;
border-bottom:0;
background:#5BA2D9 url('./images/header_bg.png') repeat-x left bottom;
}

#header_div img{
border:0;
padding:5px 10px;
}

I used the Google Chrome element-inspector and noted that the height is 40px (of the <a>)

Live visual example here

Answer 1

Because <a> is an inline element. Try some CSS:

#header_div {
    overflow: hidden;
}

#header_div a {
    display: block;
    float: left;
}

<a> is an inline element, therefore (with the exception of “with”) it does not abide by structural properties such as “height”. This is solved by display: block;.

Block element occupy as the entire width of their parent by default, but you wanted the <a> element to wrap tightly around your image. This is solved by float: left;.

Because the <a> element is the only object inside #header, #header collapses when <a> floats. This is solved by overflow: hidden;, which is a cheap “clearfix“.

When a float is contained within a container box that has a visible border or background, that float does not automatically force the container’s bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag.

Source: http://www.positioniseverything.net/easyclearing.html