say you are floating a number of % widthed elements side by side inside a container. Ideally you would want the the element to fill up 100% ( all pixels) within the container. you may get a gap or a drop in the elements caused by the UA rounding algorithm. Arguably worse , is that the gap will be variable depending on the width of the view port and the # of floated elements. This may not be an issue to some , but to me is is aesthetically disturbing.
To mitigate this effect I have relied on one of two two methods depending on the situation an desired effect.
The first option , assuming I have “gutters” between the elements. is to switch the float direction and adjust the margin.
So the last gutter absorbs the remainder pixels. if I don’t want any a gutters, and the situation permits, I tend to un-float the last element as such:
In this case the last element absorbs the remainder pixels. When needed, I sometimes to blend the two techniques so as to have the gutters remain fixed and the last element absorb the remainder pixels.
I find these work fairly well, as far as protecting the layout goes, but of course they aren’t pixel perfect and require a modicum of leeway /forethought when creating and positioning any background images.
I’d love to know what techniques do you guys employ to deal with rounding errors?
Like you I usually prefer to not float the last item and let it sit on free space. This is especially true for menus that stretch full width where authors have just added padding to make the menu links fit all the way across and then find that the last word has dropped down in some browsers because the width of text varies so much between browsers/platforms.Unfloating the last item removes the need for any padding on the last item and gives you more breathing space.
Floating the last item right and removing the margin is also a valid technique but may result in some uneven spacing.
The negative right margin on the last floated item is also useful for soaking up rounding errors but you have to be careful you don’t lose content off screen.
Of course we could use display:table-cell these days (ie8+) and just let the browser work it out as it will make the display:table element fit (or wait for the flex layout to be well supported).
Floating the last item right and removing the margin is also a valid technique but may result in some uneven spacing.
Yes. Which is why could classify my solutions as having the side effect of ‘uneven spacing’ or ‘uneven element size’ ( the last element is not a perfect pixel match as the others)
The negative right margin on the last floated item
this sounds intriguing but how would you figure out how much so as to create an exact fit?
In modern browsers I’ve never seen more than a 2px gap so 2px should do:
I must be doing something odd, as my gaps (rather gap ranges, as the gap vary with the container width) seem to be directly correlated with the # of elements. so if I have to elements I may get 0-2px gap, 3 elements a 0-3px, 4 elements 0-4px…etc. this is why i figured it mus be rounding ‘error’. That is the browser is deciding that if a container is 195px ,at some point, wide and I have 4 child elements at 25% that each child should be 48px (but 48*4= 192… so 3 pix gap). Really it’s just the really complex layout hat really show the gap.
Hmm, I’d need to see an example because as far as I remember Opera was the only one that rounded that badly as it doesn’t do fractions of a percent. IE7 and under were also a few pixels out depending on the number of elements but Firefox handles it all differently and keeps a running total of the percentages and should therefore (theoretically) be no more than 1px out)
