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


Tags: css,html,center

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.



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/


    CSS Howto..

    How can I generate a random color with Stylus CSS?

    How to create smaller CSS files for easier handling while developing [closed]

    How to use SVG fragment identifier for CSS background image on iOS?

    How to style child components from parent component's css file?

    How to align image next to text and then stack them (responsive)

    How can I add specific css id to parent menu with php or javascript

    How can I make responsive JQuery left margin?

    How to render a template with dynamic CSS?

    How to make an empty div or container glow with pure CSS?

    How to specify image size in webview css using dip?

    css how to stretch center div to fill allowable area

    How do I change the Mailchimp subscribe button color using inline CSS?

    How do I do the css for this?

    How to move div from bottom to top

    How can I place two grid items above each other using Susy?

    How to get rid of scroll bars/arrows in Wordpress, when using font style called 'Pre'

    How to remove horizontal space between divs that contain fixed size svg elements?

    How to create and style dropdown menus using the wordpress menus section? [closed]

    Should be Simple: How to preserve data on a page of basic javascript/css/html when going to another page

    How to place 2 spans beside each other with full width with CSS

    How to show the vertical image into horizontal manner using HTML and CSS?

    How to using CSS to set content of column to top not center in JSF, primefaces?

    How can I select every other element that does not have a specific class?

    How to change underline thickness of an a-tag without using border?

    How do I highlight only the innermost table row of a nested table?

    Single page wordpress template. How to create new section in css

    How to stretch images with no antialiasing

    How to fix error css width x height when run as mobile

    How to GPU accelerate CSS transform?

    How do i hook media queries to screen resolution?