Horizontal Boxes

The Box model still has me confused. I could make tables do anything I wanted, but I really dont understand boxes

I finally got (in http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24743187.html) code that gives be two vertical boxes with sidebar and mainbody that work.

My html has
<div id="container">
<div id="container2">
  <div id="header">
    <h1>Happy Hippo Education Centre</h1>
    <h2>http://happyhippoeducation.com/</h2><br/>
  <!-- end #header -->
  </div>

..........

<!-- end #container2 --></div>
<!-- end #container --></div>

I would like to subdefine the horizontal header into 3 side by side boxes, like in tables would be <table><tr><td align=left width=100><img src="..."></td>
<td align=center>Text</td>
<td align=right width=100><img src="..."></td>

The css I have right now for header is

.twoColHybLtHdr #container {
      width: 100%;  /* this will create a container 96% of the browser width */
      background: #FFF;
      margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
      border: 1px solid #FF3;
      text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColHybLtHdr #header {
      padding: 0px 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
      text-align: center;
      background-color: #FF3;
}

do the #container and #header relate to the .container and .header?

Anyway I tried adding the css
.headleft {
img { float:left; }
}
.headcenter {
float:left;
}
.headright {
img { float:right; }
}

and html of

<div id="container">
<div id="container2">
<div id="header">
<div id="headleft">
<img src="images/hippo03.jpg">
</div>
<div id="headcenter">
<h1>Happy Hippo Education Centre</h1>
<h2>"Devoted to your Success"<br>http://happyhippoeducation.com/</h2><br>
</div>
<div id="headright">
<img src="images/hippo03.jpg">
</div>
<!-- end #header -->
</div>

hoping for a left flush image, a centered heading, and a right flush image

but instead I got a centered image over a centered heading over a centered image

What am I doing wrong?