IE & & 8 display problem using float:left & float:right

[CapereSpiritum]

Hi, I have a css problem with IE7 & IE8
The website

In IE9 + and all the major browsers the Logo floats right and the menu left.

When viewed on mobile protrait the logo and menu are one above the other.

Can anyone tell me the hack or css code to stop the two items displaying on top of each other in IE 8 or less?

Current CSS

Code: Select all

div#logo {
float: right;
margin: 0;
width:185px;
}

div#menu_vert {
float: left;
margin: 0;
padding: 0;
width:185px;
}

Appreciate all help.

[Jos]

You could start with solving html validation errors, especially the double doctype

[Rolf]

Code: Select all

<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->

<__script__ src="uploads/js/modernizr-1.7.min.js"></__script>

</__script>

Code: Select all

<div class="container .container_footer>