title: Why won't these 2 divs align horizontally?
body: <p>I'm building a landing page and I've got a container <code>&lt;div&gt;</code> and below that I have have a hero and it's below this that I'm trying to align 2 divs next to each other. I can't seem to get them to align and I've tried everything (<code>float:left</code> and <code>float:right</code>) and even <code>margin</code> but it doesn't work. Annoying thing is I need it to work in IE6 too (lame I know) :(</p>
  
  <p>CSS:</p>
  
  <pre><code>.container {
  width:960px;
  margin:0 auto;
  position:relative;
  
  
  }
  
  #leftbox {
  background-image:url(images/left-box.jpg);
  float:left;
  width:450px;
  height:359px;
  }
  
  #rightbox {
  background-image:url(images/right-box.jpg);
  float:right;
  width:450px;
  height:359px;
  }
  </code></pre>
  
  <p>And here's the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;img src="images/hero-main.jpg" alt="some text" usemap="#amap"/&gt;
  &lt;map name="amap"&gt;
    &lt;area shape="rect" coords="788,278,937,332" href="http://www.someurl.co.uk" alt="text"/&gt;
  &lt;/map&gt;
  &lt;div id="boxes"&gt;
    &lt;div id="leftbox"&gt; &lt;/div&gt;
    &lt;div id="rightbox"&gt; &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas please as I'm kinda stuck :S</p>