Html/CSS floating problems - html

Question

I'm having some problems with my css, my 2 div's are getting under eachother. I want them both next to eachother.
I'm having a body with a user menu and 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>© #DateTime.Now.Year - Immo QR by 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

Answer 1

Mathias,
you have closed a div unnecessarily, please remove that.
also give float left to both div.

Answer 2

Two things come to mind which should help fix the problem:
Since the right-floating <div> comes after the left-floating <div> it may be moving to the next line prior to floating. Try floating both elements left.
Sometimes browsers round up to the nearest pixel when calculating sizes. Does your code work better with a 10/90 split? 20/80? If your full container is 960px, try calculating the column sizes manually in pixels.

Answer 3

Try setting border: 0 on both the floated elements because unless you're resetting your CSS via a reset or normalise, they will inherit a nominal border:
#body
{
margin: 0 auto;
max-width: 960px;
}
#user-menu
{
float: left;
width: 15%;
}
#content
{
float: right;
width: 85%;
}
#content, #user-menu{
border: 0;
}
#footer{
clear: both;
}
Heres a codepen:1:
HTH