Html/CSS floating problems -

i'm having problems css, 2 div's getting under eachother. want them both next eachother.

i'm having body user menu , content div's inside.

html:

<div id="body">             <div id="user-menu">                 @if (request.isauthenticated)                 {                      <ul id="account-menu">                         <li>@html.actionlink("my profile", "myprofile", "profile")</li>                         <li>@html.actionlink("links", "links", "profile")</li>                         <li>@html.actionlink("history", "history", "profile")</li>                         <li>@html.actionlink("credits", "credits", "profile")</li>                         <li>@html.actionlink("settings", "manage", "account")</li>                     </ul>                   }             </div>             <div id="content">                 @renderbody()             </div>         </div>         <div id="footer">             <p>&copy; @datetime.now.year - immo qr enetricity.com</p>         </div>     </div> 

css:

#body  {  margin: 0 auto; max-width: 960px;  }  #user-menu  { float: left; width: 15%;  }  #content  { float: right; width: 85%;  } 

image:

greets

mathias, have closed div unnecessarily, please remove that. give float left both div.