non floating element swallows floating ones

[romsok]

Hi,

I am trying to accomplish the following:
I have a page with a div. The div encapsulates a report. The report div has within it 3 more divs, reportInfo, icons, reportBody.

reportInfo is a paragraph of text, icons contains icons with links for report downloading, and reportBody contains a wide report with tables and stuff.

I want the reportInfo to be above the top-left corner of reportBody, and icons to be above the top-right corner of reportBody. I tried floating reportInfo to the left and icons to the right. But when I do that, reportBody, instead of staying under them, floats up and kind of swallows them - so both reportInfo and icons appear overlaying the top of reportBody.

Mark-up:

<div class="reportFrame">
        <a name="anchor"/>

        <div class="reportInfo">
        </div> 

        <div class="icons">
        </div> 

        <div  class="reportBody">
        </div>
</div>

CSS:

.reportInfo
{
   float: left;
}

.icons
{
   float: right;
}