I can use css to apply colors, borders and fonts with the best of them. Selectors? No problem. But I still can't get my head around basic floats.

For a banner I want an image all the way to the left and another all the way to the right with a div in between for some content. Trivial right?

This works:
Code:
<header id="banner">
  <img                              src="NatlGames_Logo_2012_sm.jpg" height="50" width="50" alt="Logo Left"/>
  <img style="float: right; src="NatlGames_Logo_2012_sm.jpg" height="50" width="50" alt="Logo Right"/>
  <div 
    style="position: absolute; left: 60px; top: 5px; color: red; background-color: LightBlue;"
  >Header Line 1<br />Header Line 2</div>
</header>
And even validates. But it uses absolute positioning of the div which is fine but it just seems like I should be able to float the division next to the left image and then the float the right image after it.

What am I missing?