title: Can't get these divs to display inline
body: <p>I have a website located <a href="http://dev.mpirebooking.com/" rel="nofollow">here</a>. </p>
  
  <p>I am having a hard time displaying some  tags as inline. There are no breaks in the HTML,  and no clear attributes. There's something missing here, but I don't know what. </p>
  
  <p>Basically, I want them set up like this... </p>
  
  <p>[logoimage][slider][logotitle]</p>
  
  <p>I have changed the slider size by percentage, and tried wrapping everything in a new div and adding the "in-line block" attribute. </p>
  
  <p><strong>Here's my HTML...</strong></p>
  
  <pre><code>&lt;div id="top"&gt;
  
      &lt;div id="logo"&gt;
              &lt;a href="http://dev.mpirebooking.com"&gt;&lt;img id="logoimage" src="images/logo_mpire_management.png" width="80" height="56" alt="logo"&gt;&lt;/a&gt;&lt;/div&gt;   &lt;!-- Logo image --&gt;
  
          &lt;section id="slideshow"&gt;    &lt;!-- Slideshow Start --&gt;
          &lt;div class="html_carousel"&gt;
              &lt;div id="slider"&gt;
                  &lt;div class="slide"&gt;
                      &lt;img src="images/slideshow/sliderimage1.jpg" width="3000" height="783" alt="2 Chainz"/&gt;&lt;!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --&gt;
                  &lt;/div&gt;&lt;!--/slide--&gt;
  
                  &lt;div class="slide"&gt;
                      &lt;img src="images/slideshow/sliderimage2.jpg" width="3000" height="783" alt="French Montana"/&gt;&lt;!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --&gt;
                  &lt;/div&gt;&lt;!--/slide--&gt;
  
                  &lt;div class="slide"&gt;
                      &lt;img src="images/slideshow/sliderimage3.jpg" width="3000" height="783" alt="2 Pistols"/&gt;&lt;!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --&gt;
                  &lt;/div&gt;&lt;!--/slide--&gt;
  
                                  &lt;div class="slide"&gt;
                  &lt;img src="images/slideshow/sliderimage4.jpg" width="3000" height="783" alt="Juicy-J"/&gt;&lt;!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --&gt;
                  &lt;/div&gt;&lt;!--/slide--&gt;
  
                                  &lt;div class="slide"&gt;
                  &lt;img src="images/slideshow/sliderimage5.jpg" width="3000" height="783" alt="Kendrick Lamar"/&gt;&lt;!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --&gt;
                  &lt;/div&gt;&lt;!--/slide--&gt;
  
                                  &lt;div class="slide"&gt;
                  &lt;img src="images/slideshow/sliderimage6.jpg" width="3000" height="783" alt="Artist Name"/&gt;&lt;!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --&gt;
                  &lt;/div&gt;&lt;!--/slide--&gt;
  
  
  
              &lt;/div&gt;&lt;!--/slider--&gt;
            &lt;!--&lt;div class="clearfix"&gt;&lt;/div&gt;--&gt;
          &lt;/div&gt;&lt;!--/html_carousel--&gt;
      &lt;/section&gt;  &lt;!-- Slideshow End --&gt;
  
          &lt;div id="logo"&gt;
              &lt;a href="http://dev.mpirebooking.com"&gt;&lt;h1 id="logotitle"&gt;MPIRE Booking&lt;/h1&gt;&lt;/a&gt; &lt;!-- Logo text --&gt;
          &lt;/div&gt;&lt;!--/logo--&gt;
  
          &lt;nav&gt;   &lt;!-- Navigation Start --&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="booking.html"&gt;Booking&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#footer"&gt;Contact&lt;/a&gt;&lt;/li&gt;               
              &lt;/ul&gt;      
          &lt;/nav&gt;  &lt;!-- Navigation End --&gt;
  
      &lt;/div&gt;&lt;!--/top--&gt;
  </code></pre>
  
  <p><strong>Here's my CSS... (for the divs you see above)</strong>
  (Click <a href="http://dev.mpirebooking.com/css/style.css" rel="nofollow">here</a> for the full style sheet)</p>
  
  <pre><code>#top{
      height:20px;
  }
  
  #logo {
      margin-top:1%;
      text-decoration:none;
      }
  
  #logo a:hover { color: #8f1929; text-decoration: none; }
  
  #logoimage{
      width:200px;
      height: 141px;
      padding-right:10px;
      float:left;
  }
  
  #logotitle{
      margin-top: 50px;
      float:right;
      font-family: Broadway, Arial, Helvetica, sans-serif;
      font-weight:normal;
      font-size:200%;
      text-shadow: 0 1px 1px #FFF;
      text-decoration: none;
  }
  
  nav {
      float:right;
      width:100%;
      display:block;
      height:40px;
  }
  
  nav ul li{
      display:block;
      width:25%;
      float:left;
      text-align:center;  
  }
  
  nav ul li a{
      font-family:Lato, Helvetica, Arial, sans-serif;
      width:90%;
      text-decoration:none;
      text-transform:uppercase;
      font-weight:400;
      line-height:250%;
      display:block;
      color:#FFFFFF;
  }
  
  nav ul li a:hover{
      color:#8f1929;
  }
  
  nav ul li p{
      font-family:Lato, Helvetica, Arial, sans-serif;
      width:90%;
      text-decoration:none;
      text-transform:uppercase;
      font-weight:400;
      line-height:250%;
      display:block;
      color:#8f1929;
  }
  
  .html_carousel {
  }
  .html_carousel div.slide {
      position: relative;
  }   
  .html_carousel div.slide img {
      width: 30%;
      height: auto;
      border-radius:15px;
  }
  
  .clearfix {
      float: none;
      clear: both;
  }
  
  #slideshow{
      width:100%;
      margin-top:0%;
  }
  
  .clearfix {
      float: none;
      clear: both;
  }
  </code></pre>