Float Left 100% height div - gap between divs

Answer 1

Remove the comment on top of the page The "Put IE into quirks mode" thing

You are using a lot of 'hacks'. By that I mean the CSS selectors that begin with * html

I'm not saying that is the cause of the problem, but it is not good practice and is error prone.

1) try using conditional comments for the browser that has the gap problem instead of using those hacks 2) try editing your question by providing information about the version of IE you're testing against (my guess is IE 6 or even lower).

Answer 2

As already said, your code is full of hacks. Please remove especially the unnecessary definitions. If a browser does not support cascading style sheets, it will not support CSS anyway.

That being said, why not use position: absolute; for #right?

As in

#right{
  position: absolute;
  left: 100px;
  padding-left: -100px;
  width: 100%;
  ...
}

Answer 3

To be honest, if you're filling up the whole body with these divs, then you're better off giving one of them a transparent background and setting the background color of the body to the desired color, masking the problem.

Especially if, in trying to solve the IE issue, you're introducing a plague of CSS hacks into what should be nice and clean code considering the simple layout you're shooting for.