Using CSS, How can I stack two spans between two floating divs?

At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.

Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/

I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.

I tried adding another table to the mix but that didn't help.

Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.

And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.

Thanks,

Paul

Solution

I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:

<style type="text/css">
.leftit {
    float: left;
}
.rightit {
    float: right;
}
.centerit {
    width: 30%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.centerpage {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>

(fiddle for above)

I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.

Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.

The final code (fiddle):

.leftit {
    float: left;
    font-size: 0.8em;
}
.rightit {
    float: right;
    font-size: 0.8em;
}
.centerit {
    width:220px;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.8em;
}
#headmiddle div {
    border: 1px solid #000; 
    margin-bottom: 3px;
}
.centerpage {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

strong { font-weight: bold; }

.search { background: orange; }
.active { background: #8ed200; }

dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }

<div class="centerpage">
    <div class="leftit">a little search form here</div>
    <div class="rightit">
        <dl>
            <dt>Legend:</dt>
            <dd>Status numero uno</dd>
            <dd>Status two</dd>
        </dl>
    </div>
    <div class="centerit" id="headmiddle">
        <div class="active"><strong>Status:</strong>
            Active</div>
        <div class="search">Search results displayed</div>
    </div>
</div>

Thanks to all the great answers - I learned a lot from this question.

Paul