divs move around in IE - html

Question

I've been working on a website and after testing it in all browsers it looks fine except in IE, the contact div and nav shift around the page. Can someone advise me of any code that can correct this?
http://jsfiddle.net/ykntfnnx/
Thanks in advance
Here is the HTML and CSS that have the issue in IE
<div id="menu">
<ul>
<li>Home</li>
<li class="divider"></li>
<li><span>About Us</span></li>
<li class="divider"></li>
<li><span><span>Work</span></span></li>
<li class="divider"></li>
<li><span><span><span>Services</span></span></span></li>
<li class="divider"></li>
<li><span><span><span><span>Contact</span></span></span></span></li>
</ul>
<div id="contact">
<h3>020 8810 5000<br />
07703 193 868 info#spema.co.uk</h3>
</div>
</div>
CSS
#menu{
float:right;
padding:50px 25px 0 50px;
margin:0px;
height:15px;
}
#menu ul{
display:block;
list-style:none;
margin:0px;
}
#menu ul li{
display:inline;
padding:0px;
margin:0px;
}
#menu ul li.divider{
float:left;
width:1px;
height:15px;
background:url(images/menu_divider.gif) no-repeat center;
padding:0 12px 0 12px;
}
#menu ul li a{
display:block;
padding:0px;
margin:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #FC0;
font-size:18px;
line-height:12px;
}
#menu ul li a:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#menu ul li a span {
display:block;
padding:0px;
margin:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #F0F;
font-size:18px;
line-height:12px;
}
#menu ul li a span:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#menu ul li a span span {
display:block;
padding:0px;
margin:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #6CF;
font-size:18px;
line-height:12px;
}
#menu ul li a span span:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#menu ul li a span span span{
display:block;
padding:0px;
margin:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #6C6;
font-size:18px;
line-height:12px;
}
#menu ul li a span span span:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#menu ul li a span span span span {
display:block;
padding:0px;
margin-left:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #039;
font-size:18px;
line-height:12px;
}
#menu ul li a span span span span:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#contact{
float:right;
height: 150px;
width: 225px;
}
body
{
background:url(images/triangle_background.jpg) repeat;
background-size: cover;
background-attachment:fixed;
font-family: 'aleoregular', Arial, sans-serif;
padding:0;
font-size:16px;
margin:0px auto auto auto;
color:#68696C;
}
h3{
color:#F7911D;
font-size:23px;
font-family: 'aleobold', Arial, sans-serif;
text-align: right;
clear:both;
}

Answer 1

Try adding a width to your #menu declaration
#menu{
float:right;
padding:50px 25px 0 50px;
margin:0px;
height:15px;
width:440px;
}
http://jsfiddle.net/ykntfnnx/2/
IE seems to act a bit funny with floats unless a width of the div is supplied