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.
Code:
		
<ul class="nav">
	<li><a href="#">item<br> taller float</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
 </ul>


               .nav{margin: 0; padding: 0 0 0 6em; list-style: none; border: 1px solid; overflow: hidden; }
		li {float: left; width: 25% ; background: pink;margin-right:2em}
		li:last-child {float: right;  margin-right:0 }
		li:first-child {margin-left:-6em  }
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:

Code:
		.nav{margin: 0; padding: 0; list-style: none; border: 1px solid; overflow: hidden; }
		li {float: left; width: 25% ; background: pink;}
		li:last-child {float: none; overflow: hidden; width: auto}
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?