Question

The links don’t change the “holder” height at all, really I don’t know what is wrong

HTML:

<div id="holder">
<a class="button" href="#"><span>home</span></a>
<a class="button" href="#"><span>example</span></a>
<a class="button" href="#"><span>another examp.</span></a>
<a class="button" href="#"><span>hello</span></a>
<a class="button" href="#"><span>abc</span></a>
</div>

CSS:

*{
margin:0;
padding:0;
}
#holder{
width:100%;
background: #000;
border: 1px solid red;
}
.button {
    color: #444;
    display: block;
    float: left;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px;
}
.button span {
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}
.button:hover {
    background: #333 url('./images/bg_button_a.jpg') no-repeat scroll top right;
    outline: none;
}

.button:hover span {
    background: #333 url('./images/bg_button_span.jpg') no-repeat;
}

Answer 1

Elements do not automatically expand to contain floated descendents.

Adding overflow: hidden is one type of clearfix and so long as you don’t mind elements being clipped at the element’s bounding box, the easiest.

#holder {
   overflow: hidden;
}

Further Reading.