CSS problem, float horizontal scrollbar bug

Hello, I have a CSS problem that only appears in Safari (and Google Chrome, so I assume it's a webkit thing). Take my following code. The moment I add a number greater than 0 to the bolded "left" below, it adds a *_horizontal scrollbar_* to the viewport. This problem goes away the moment I remove the float from the same div, so I assume it's a bug that has to do with floats within floats not shrink wrapping but instead taking on a large width? This doesn't occur for any other browser including Opera, IE, and Firefox.

Is this a known bug, and is there an explanation for why it behaves this way? Any insight is appreciated.

.button {float:right; position:relative; left:-50%; background:red;}
.button div {float:left; position:relative; left:1px; height:50px; background:yellow;}

<.div class="button">
<.div>
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
<./div>
<./div>