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 add a consistent left margin to a checkbox label?

    How to make a radio button look like a toggle button

    div content shows when display:none

    How do I make the Android WebView not ignore the 'height' css property?

    How to make 2 level scrolling tab in CSS like this in HTML 5

    CSS selector problem. Any ideas how to select this?

    How to center a CSS Hexagon

    How to make triangle shape in before a div in pure css?

    How to use HTML-CSS on outputting data conditionally?

    How to Make Image Do All 3: Cover (left-to-right), Resize, and Scroll

    How can I push the primefaces DefaultMenuModel before an accordion panel?

    How to hide elements in navbar until hover in css?

    How to match columns in a scrolling table with fixed headers

    How to mix url string & attribute value in CSS content property? [duplicate]

    How to add CSS class to CQ dialog box

    How do I know when to use a Class, an ID or HTML5 to make layouts in HTML using CSS? [closed]

    How to change the scrollbar color using css [duplicate]

    css how to make full height div with scroll support?

    How can I make a button-link, as Like in Facebook?

    How to set css error-styles programatically on a TextBox

    How to remove floats so items don't wrap with CSS only in this Codepen

    How to add an image to a CSS popup box

    How to make an oblique oval in CSS?

    Using Jquery to show and hide elements based on an input

    How to override CSS Background that already has !important?

    Shouldn't adapting the scree size of a fluid layout in the desktop show how the site should look for mobile?

    How to adjust 100% height to include height of added element

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How to force a browser to show the latest changes to a CSS file?

    How to fill a text with color using CSS?