Search code examples
htmlcssinternet-explorerfixedliquid-layout

Extra space between fixed and liquid elements in IE

I'm setting up a very simple fixed-liquid layout. The header is set to 100%, the sidebar is set at a fixed width and floated to the left, and the width of the content area is not defined (so that it fills the remaining space).

It works well in every browser except IE, where approximately 3 pixels of white space is added between the sidebar and the content area.

I can't reproduce the problem in JSFiddle (even when I copy and paste my exact code), so I've attached images instead. The first image was rendered in Chrome and the second was rendered in IE9.

Chrome IE9


CSS (styles.css)

body {
    margin: 0px;
}
#header {
    width: 100%;
    height: 150px;
    background: #F00;
}

#sidebar {
    float: left;
    width: 280px;
    height: 1000px;
    background: #0F0;
}

#content {
    height: 1000px;
    background: #00F;
}


HTML

<html>
<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="content"></div>
</body>

Solution

  • Have you tried adding a doctype declaration?

    <!DOCTYPE html>
  <html lang="en">
    <head>
      <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
      <div id="header"></div>
      <div id="sidebar"></div>
      <div id="content"></div>
    </body>
   </html>