Rendering of HTML in Firefox and Chrome

Question

<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?

Answer 1

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.