Percentage Widths and Borders 1px

Question

In both versions of Safari and Chrome, I noticed that when I create elements side by side, rounding off to only 100% of the number, I get a correcting small border of pixels (since I do not use a white background for elements / divs), which resizes. I feel like I’m just missing the position attribute, but I can’t find any resources on Google to help me.

Screenshot to illustrate my problem (OS X Safari and Chrome verified)

http://jsfiddle.net/shawnstrickland/HXyZ7/

Answer 1

You can use overflow:hidden; . write like this:

 nav { float: left; width: 25%; background-color: blue; } article { overflow:hidden; background-color: red; } 

Check out http://jsfiddle.net/HXyZ7/7/

Answer 2

The white gap disappears when I increase it to 75.3: p

 nav { float: left; width: 25%; background-color: blue; } article { float: right; clear:none; background-color: red; width: 75.3%; } 

http://jsfiddle.net/sJQeZ/

Answer 3

Webkit has problems calculating percentages.

http://css-tricks.com/percentage-bugs-in-webkit/

Answer 4

You use all witdh, but your floating options create this problem. Use only one floating direction (left here).

Unfortunately, I do not know WHY this is happening.

Edited Sample
http://jsfiddle.net/HXyZ7/1/

 nav { float: left; width: 25%; background-color: blue; } article { float: left; /* was floating right before */ background-color: red; width: 75%; }