title: Need divs side by side, but "float: left" isn't working
body: <p>What I'm trying to achieve is three divs in a row with different, specific widths and equal heights.  Two of them actually have content, and the middle one just contains a vertical spacer image.  These three divs are contained in a "slide" div, along with other slides.  The slides are all in one container div and controlled with JavaScript, hiding all but one slide at a time.  Note that the slides are not the problem, but rather the layout of their contents.  Currently, I can only make the three divs inside the second slide stack on top of each other, and yet it <em>works perfectly fine with four divs in the first slide</em>.  Here's what I've tried so far and hasn't worked:</p>
  
  <ul>
  <li><code>float:left;</code> on each div</li>
  <li><code>float:left;</code> on first two and then <code>float:right</code> on last</li>
  <li><code>display:inline;</code> on each div</li>
  <li><code>display:inline-table;</code></li>
  <li>lowering widths so they're not exact</li>
  <li>removing all margins</li>
  <li><code>clear:left;</code> after third div</li>
  <li><code>clear:both;</code> after third div</li>
  <li>using <code>class</code> instead of <code>id</code> (which actually has changed things)</li>
  <li>various combinations of the above</li>
  </ul>
  
  <p>I'm using Eclipse for code and Safari on Mac OS X to test; everything is up to date.  Any help is greatly appreciated as I have been trying to get this to work for two and a half days now.  Here is my code, if you need any more of it to find the problem, please let me know.</p>
  
  <p>HTML:</p>
  
  <pre><code>     &lt;div id="container"&gt;
           &lt;div class="slide1"&gt;
  
              &lt;div id="news-content"&gt;
                  &lt;div id="news-img"&gt;
                      &lt;img src="album_example.png" /&gt;
                  &lt;/div&gt;
                  &lt;div id="news-img-description"&gt;
                      &lt;h2 align="left"&gt;Lorem Ipsum&lt;/h2&gt;
                      &lt;p align="left"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat dictum pharetra. Cras porta.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div id="news-vr"&gt;
                      &lt;img src="light_vr.png" /&gt;
                  &lt;/div&gt;
                  &lt;div id="news-feed"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
          &lt;/div&gt;
  
  
          &lt;div class="slide2"&gt;
              &lt;div id="music-content"&gt;
                  &lt;div id="music_albums"&gt;
                      &lt;ul style="list-style-type: none;"&gt;
                          &lt;li&gt;&lt;img src="album_test.png" /&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img src="album_test.png" /&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img src="album_test.png" /&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div id="music_vr"&gt;
                      &lt;img src="light_vr.png" /&gt;
                  &lt;/div&gt;
                  &lt;div id="music_remixes"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="slide3"&gt;
          &lt;h2&gt;This is slide 3.&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="slide4"&gt;
          &lt;h2&gt;This is slide 4.&lt;/h2&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>*album_example.png is 300x300 and album_test.png is 100x100</p>
  
  <p>CSS:</p>
  
  <pre><code>@CHARSET "UTF-8";
  
  h2 {
      color: #AAAAAA;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 150%;
  }
  
  p {
      color: #AAAAAA;
      font-family: Arial, Helvetica, sans-serif;
  }
  
  #container {
      width: 900px;
      height: 500px;
  }
  
  .slide1, .slide2, .slide3, .slide4 {
      width: 900px;
      height: 500px;
  }
  
  #news-content {
      width: 900px;
      height: 500px;
      margin: 0;
      max-height: 500px;
  }
  
  #news-img {
      float: left;
      width: 300px;
      padding: 100px 0 0;
      max-height: 300px;
  }
  
  #news-img-description {
      float: left;
      width: 295px;
      padding: 160px 15px 0 15px;
      max-height: 340px;
  }
  
  #news-vr {
      float: left;
      width: 1px;
      padding: 0 2px;
      max-height: 500px;
  }
  
  #news-feed {
      float: right;
      width: 300px;
      max-height: 500px;
  }
  
  #music-content {
      width: 900;
      height: 500;
      margin: 0;
      max-height: 500px;
  }
  
  #music-albums {
      float: left;
      width: 447px;
      padding: 15px 0 0 0;
      max-height: 485px;
  }
  
  #music-vr {
      float: left;
      width: 1px;
      padding: 0 2px;
      display: inline-block;
      max-height: 500px;
  }
  
  #music-remixes {
      float: left;
      width: 448px;
      padding: 15px 0 0 0;
      display: inline-block;
      max-height: 485px;
  }
  
  #music-albums, #music-remixes ul
  {
      margin: 0;
      padding: 0;
  }
  
  #music-albums, #music-remixes ul li
  {
      margin: 0 0 1em;
      padding: 0;
      list-style-type: none;
  }
  </code></pre>