Cannot float item next to another floated item...help needed...

Question

Hi everyone,
I'm using DW CS4 and am somewhat in a snag. I am trying to line up an image, text and another image side by side.  I was successfully able to float the text to the right  of the image (by using float: left) and now I am trying to float another image left of the text.  However, when I attempt, the image does not move and the text expands out (I put the text in a DIV container and gave it a width of 800 px); my entire layout is 1280 pixexl.  So what I'm asking is, how can I float an item next to another item?  I've posted the code below.  All help is greatly appreciated.  Thank you!
**I posted my entire CSS and highlighted the area I am having issues with.
Website Dimensions:
body {
          height: 1024px;
          width: 1280px;
          margin:0 auto;
          position:relative
HTML:
  <!--Main Content Begin-->
  <div id="main_content">
  <!--Top Hat Photo Begin-->
  <div id="Top_Hat_Photo">
      <img src="Dee 201 Big Smile Fade Surgical.jpg" width="438" height="376" alt="Dee Lewis" /></div>
      <!--Top Hat Phote End-->
      <!--Quotes Begin-->
      <div id="Quotes">
      <h1> Main Content</h1>
      <p>&quot;From writer to filmmaker to actress and back again. DeAara Lewis comfortably wears the hats of three crafts.&quot;</p>
  <p> Pearl Washington </p>
    <p> Tri State Defender</p>
    <p> </p>
    </div>
    <!--Quotes End-->
    <!--TV Icon Begin-->
    <div id="TV_Icon">
  <img src="TPIMH TV.jpg" width="303" height="325" alt="The People Inside My Head Coming Soon!" /></div>
  <!--TV Icon End-->
</div>
<!--end "main content"-->
CSS:
#container #main_content {
#container #Header #Dee_Title {
          padding-left: 50px;
          width: 600px;
          clear: both;
#container #main_content #Top_Hat_Photo img {
          float: left;
#container #main_content #Quotes {
          width: 800px;
          float: left;
#footer {
          clear: both;
#Header #Navigation_Menu ul {
          margin: 0px;
          padding: 0px;
          list-style:none;
#Header #Navigation_Menu ul li {
          float: left;
          text-align: center;
#Header #Navigation_Menu ul li a:link, #Header #Navigation_Menu ul li a:visited {
          padding:.2em .5em;
          display:block;
          font-family:Georgia, "Times New Roman", Times, serif;
          font-size:1em;
          font-weight:bold;
          color:#000;
          text-decoration:none;
          line-height:1.2em;
          margin-right:.5em
#Header #Navigation_Menu ul li a:hover {
          color:#C90;
#Header #Navigation_Menu ul li a.current, #Header #Navigation_Menu ul li a.current:hover, #Header #Navigation_Menu ul li a.current:active {
          color:#00F;
          cursor:default;

Answer 1

Working with Floats & Margins:
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Captions with Floated Images
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Photo Layout
http://alt-web.com/TEMPLATES/Dark-Grid-II.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/