Float pushing down content in IE

programming web dev
1

I have encountered a problem in IE where my right hand navigation is pushing the content down to below it, my code works in safari and in Firefox.

Live Page: http://drafts.1stclassmedia.com/mph

I’ve stripped out all my margins and padding but I cant see what else it owuld be,can anyone help?

XHTML:


<body>
<div id="container">
<div id="sidebar">
<ul>
<h2>Navigation</h2>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Home</a></li>
</ul>
</div>
<div id="bodyblock">
<div id="header"><img src="image1.gif" alt="header" /></div>
<div id="navbar">&nbsp;</div>
<div id="advert"><img src="image2.gif" alt="castle" /></div>
<div id="main">
<h1>Header</h1>
<p>Content here</p>
</ul>
</div><!--main-->
</div>
<!--bodyblock-->
<div id="footer"><p>footer her</a></div>
</div><!--container-->
</body>

CSS:

body {
margin:0px;
background:url(../gifs/back.gif) repeat-x #333333;
font-size:62.5%;
text-align:center;
}

#container {
margin-left:auto;
margin-right:auto;
text-align:left;
background:url(../gifs/backctr.gif) repeat-y;
width:800px;
}

#bodyblock {
margin-top:0px;
width:600px;
}

#header {
width:580px;
height:117px;
margin:0px 10px;
padding:0px;
background:url(../gifs/header.gif) no-repeat;
}

#header span {
display:none;
}

/*sidebar*/
#sidebar {
float:right;
margin-top:0px;
text-align:left;
width:200px;
}

#sidebar ul {
padding:0px 5px;
margin-bottom:10px;
}

#sidebar li {
padding: 0px 5px;
list-style-type:none;
}

#sidebar p {
font:1.1em Arial, Helvetica, sans-serif;
padding:0px 10px;
color:#fff;
}

#sidebar a {
font:1.0em Arial, Helvetica, sans-serif;
color:#CCCC99;
text-decoration:underline;
}

#sidebar a:hover {
color:#FFFFFF;
background-color:#CCCC99;
text-decoration:none;
}

#sidebar li a {
font:1.2em Verdana, Arial, Helvetica, sans-serif;
padding:3px;
color:#fff;
border-bottom:1px #CCCC99 solid;
text-align:right;
text-decoration:none;
display:block;
}

# html body #sidebar li a {
width:154px;
padding:2px;
}

#sidebar li a:hover {
background-color:#CCCC99;
color:#000;
text-decoration:none;
}

/*main styling*/

h1 {
font:1.4em Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000;
padding-bottom:2px;
border-bottom:1px dotted #CCCC99;
}

h2 {
font:1.2em Arial, Helvetica, sans-serif;
font-weight:bold;
color:#333;
background:url(../gifs/sidenav.gif) repeat-x;
height:24px;
width:180px;
padding:0.5em 0.2em;
margin:0px 10px;
}

#advert {
width:560px;
height:276px;
padding:0px 20px;
}

#navbar {
width:580px;
height:8px;
border:1px solid #333;
background:url(../gifs/nav.gif) repeat-x;
margin:2px 10px;
}

#main {
width:560px;
margin:5px 0px;
padding:20px;
}

#main p {
font:1.2em Arial, Helvetica, sans-serif;
line-height:1.3em;
color:#333;
text-align:left;
}

#main ul {
font:1.2em Arial, Helvetica, sans-serif;
list-style-type:disc;
}

#main li {
padding:1px 0;
}

#main a {
font:1.2em Arial, Helvetica, sans-serif;
color:#CCCC66;
text-decoration:underline;
}

#main a:hover {
color:#333;
background-color:#cccc99;
text-decoration:underline;
}

#footer {
height:18px;
background:url(../gifs/footer.gif) no-repeat;
clear:right;
width:800px;
}

#footer p {
padding:0px 20px;
font:1.1em Arial, Helvetica, sans-serif;
color:#CCCC99;
}

#footer a {
font:1.0em Arial, Helvetica, sans-serif;
color:#CCCC99;
text-decoration:underline;
}

#footer a:hover {
font:1.0em Arial, Helvetica, sans-serif;
color:#333;
}