Hi all I have problem with my div's in html. I have set them correctly in chrome but when I am using firefox or IE my last div is going in the next row.
Here is my code:
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="menu"></div>
<div id="vis"></div>
<div id="footer"></div>
<div>
And their css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#menu
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#vis
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
#container
{
width:98%;
padding-left:1%;
padding-right:1%;
}
#header
{
background-color:#4671D5;
-moz-border-radius-topleft: 100px 50px;
border-top-left-radius: 100px 50px;
-moz-border-radius-topright: 100px 50px;
border-top-right-radius: 100px 50px;
}
How can I make this div's to fit to each other perfectly in other browsers too? Chrome is exactly what I need. Safari gives me gap between vis
and menu
of 2px and IE and Firefox is putting my last div vis
in the new row. Header and footer are okay. I just put them so you can test it at your pc. And I want to have %
as I want this to be usable to all resolutions.
Change menu css to
#menu
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.1%;//previos 15.25%
float:left;
margin:0;
}
Working demo http://jsfiddle.net/J5fVj/2/