How to position two blocks side by side with CSS

Question

I have a logo and a secondary menu that I would like to appear on the same line (the logo on the far left, and the menu on the far right). The logo width is undefined and the secondary menu width is 200px wide. When I apply the following CSS, the secondary menu is pushed to the line below the logo (but still on the right side of the page):

#logo {
padding-bottom: 40px;
}

.secondaryMenu {
width: 200px;
float: right;
margin-right: 0px;
padding-right: 2px;
color: black;
font-size: 9px;
letter-spacing: 1px;
text-align: right;
}

Here is the relevant part of the HTML:

<div id="logo"> 
  <a href="index.html"> <img id="logoimg" border="0" alt="" src="images/logo.gif"/> </a>        
</div> 
<div class="secondaryMenu">
  <a href="about.html">About</a> | <a href="services.html">Services</a> |
  <a href="contactus.html">Contact Us</a> 
</div>

I would appreciate any thoughts on what I'm doing wrong.

Answer 1

#logo would need to float: left

then you should probably add a clear: both styled container after .secondardMenu or wrap them both with a clearfix class'd container