Bug 25272 – rendering of floating <div> elements with % width resizes in "steps"

• Status: UNCONFIRMED
• Component: Layout and Rendering

[Jordan Ribera]

When rendering floating divs with % widths, each div is given a calculated pixel width which is equal to divs with the same % width. However, in cases where the sum of the width of the divs *should* be 100%, the divs are still rendered with equal widths (resulting in a sum width of less than 100%).

Observe the following example:

http://nan-desu.com/example.html

Here there are 6 floating divs each with a width of 16.6667% (16.6667 == 100/6). These divs will only fill the container if the width of the container is evenly divisible by 6. When the width of the container is not divisible by 6 there will be a gap of 1-5 pixels between the end of the last floating div and the border of the container.

[Jordan Ribera]

Example has been updated to demonstrate this rendering problem in different cases:

First case: 4 divs of width 25%
(demonstates that the problem exists with integer percentages)

Second case: 6 divs of width 16.6667%
(demonstrates that the problem exists with non-integer percentages)

Third case: 8 divs of widths 9%, 10%, 11%, 12%, 13%, 14%, 15%, and 16%
(demonstrates that the problem exists with interger percentages that are not equal to eachother)

In all of these cases the sum width of the divs should be 100%

[Tekl]

Please fix this annoying bug. Web sites with full width horizontal navigation bars look strange in Webkit/Safari.

Well, there's an old workaround by using display:table instead of floats.
http://dizque.lacalabaza.net/temp/full-width-navigation-bar-with-css.html

[M. Dave Auayan]

Created attachment 46712 [details]
a test case

I'm having this same issue, coincidentally with a 16.667% width element, as well.


I have a 960px wide container, with 6 floating 16.667%  width children (which should be about 160.0032px) but they're rendered at 159px wide for a total width of 954px. 

If I bump up the children's widths to 16.6719% (which should make them 160.5024px wide each), they're rendered at the expected 160px ( 960/6 ).