How can I get these divs to appear correctly over the header?

Question

I'm trying to lay out a set of horizontally aligned divs with a header underneath, but it's appearing as follows:

This is the jsfiddle: http://jsfiddle.net/4cTSK/

What do I need to do to get the divs to appear over the header, like follows?

<div class="horizontal-div-container even-spacing-signature">
    <div>
        <span>Signed by the Client: ______________________ </span>
    </div>

    <div>
        <span>Signed by the Engineer: _____________________</span>
    </div>
</div>

<div class="horizontal-div-container even-spacing-signature">
    <div>
        <span>Date: ______________________ </span>
    </div>

    <div>
        <span>Date: _____________________</span>
    </div>
</div>

<h1>
    Appendix 3, Client Information
</h1>


h1 {
    background: #000096;
    color: #FFF;                
    text-align: center;
    font-weight: bold;
    font-size: 1em;
}

.horizontal-div-container div {
    float: left;
    clear: none;
}

.even-spacing-signature div
{
    font-weight: bold;
    width: 50%;
}

Answer 1

You need to clear your floating elements using clear: both;

Demo

Or wrap your floating elements inside a div and use overflow: hidden;

Demo 2

<div class="wrapper">
<div class="horizontal-div-container even-spacing-signature">
    <div>
        <span>Signed by the Client: ______________________ </span>
    </div>

    <div>
        <span>Signed by the Engineer: _____________________</span>
    </div>
</div>

<div class="horizontal-div-container even-spacing-signature">
    <div>
        <span>Date: ______________________ </span>
    </div>

    <div>
        <span>Date: _____________________</span>
    </div>
</div>
</div>
<h1>
    Appendix 3, Client Information
</h1>

.wrapper {
    overflow: hidden;
}

For more info on clearing floats, read this answer of mine

Answer 2

You need to clear after you use your floats. I've updated the JSFiddle to use the 'micro clearfix hack'. See the code below:

.cf:before,
.cf:after {
    content: " "; 
    display: table;
}

.cf:after {
    clear: both;
}

And then wrap your two floats in a div with the .cf class:

<div class="cf">
    <div class="horizontal-div-container even-spacing-signature">
        <div>
            <span>Signed by the Client: ______________________ </span>
        </div>

        <div>
            <span>Signed by the Engineer: _____________________</span>
        </div>
    </div>

    <div class="horizontal-div-container even-spacing-signature">
        <div>
            <span>Date: ______________________ </span>
        </div>

        <div>
            <span>Date: _____________________</span>
        </div>
    </div>
</div>