How to set 3 div's to fit the screen width

center, css, html

Solution

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/

Problem

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.

Original source