Can't get these divs to display inline - html

Question

I have a website located here.
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.
Basically, I want them set up like this...
[logoimage][slider][logotitle]
I have changed the slider size by percentage, and tried wrapping everything in a new div and adding the "in-line block" attribute.
Here's my HTML...
<div id="top">
<div id="logo">
<img id="logoimage" src="images/logo_mpire_management.png" width="80" height="56" alt="logo"></div> <!-- Logo image -->
<section id="slideshow"> <!-- Slideshow Start -->
<div class="html_carousel">
<div id="slider">
<div class="slide">
<img src="images/slideshow/sliderimage1.jpg" width="3000" height="783" alt="2 Chainz"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage2.jpg" width="3000" height="783" alt="French Montana"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage3.jpg" width="3000" height="783" alt="2 Pistols"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage4.jpg" width="3000" height="783" alt="Juicy-J"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage5.jpg" width="3000" height="783" alt="Kendrick Lamar"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage6.jpg" width="3000" height="783" alt="Artist Name"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
</div><!--/slider-->
<!--<div class="clearfix"></div>-->
</div><!--/html_carousel-->
</section> <!-- Slideshow End -->
<div id="logo">
<h1 id="logotitle">MPIRE Booking</h1> <!-- Logo text -->
</div><!--/logo-->
<nav> <!-- Navigation Start -->
<ul>
<li>Home</li>
<li>Services</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</nav> <!-- Navigation End -->
</div><!--/top-->
Here's my CSS... (for the divs you see above)
(Click here for the full style sheet)
#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;
}

Answer 1

There are several weird things on your code, like huge width properties such as 3000px for slides and even 14326px (!) on your <div id="slider"> that leave no room for the logotitle. Please, check them all.
And the floating properties: that float:right div for the logotitle makes no sense. If it had room enough it would be ok with another float:left as it comes the last one.
Here you have an example with left-floated elements creating a horizontal inline layout: www.w3schools.com/css/tryit.asp?filename=trycss_float5

Answer 2

Try adding this class
.slide
{
display:inline-block;
}