4
<div style="float: left;
            height: 20%;
            width: 70%;"</div>
<div style="float: right;
            height: 20%;
            width: 30%;">         </div>

In Chrome the two divisions are in same line. But there is a small gap between the two divs. But in Firefox there is no gap. Why is this happening? Any solution for this?

Just a student
  • 10,560
  • 2
  • 41
  • 69
Jinu Joseph Daniel
  • 5,864
  • 15
  • 60
  • 90
  • We're going to need the container for these two divs to reproduce this issue as your widths and heights are taking a percentage of their parent's width and height. – MoarCodePlz Jul 07 '11 at 17:02

1 Answers1

8

Chrome rounds all widths to integer pixels. Unless your container width is divisible by 10, this means that the float widths will get rounded so they're not actually 30 and 70 percent of it, and as a result there can be space between them.

Gecko does layout calculations in fractional pixels, so it can represent the widths much more exactly, and snap to the pixel grid at paint time, avoiding this sort of seaming.

Your possible solutions are to make sure your container has a width that's a multiple of 10px and to complain to the WebKit team about the round-to-integer-pixels behavior. Or both.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55