Your page setup has your wrapper rather small, which is why you've got more than 100% for the left bar. When I look at your wrapper it doesn't look wide enough to fit everyone inside... you have 980px and content is 650px and that leaves you 330px left to fit two sidebars. So your math is weird and browsers mostly do ok with -100% but once you go more or less they start giving you vast differences cross browser (well this might be because in my case the wrapper is always a flexible width and yours is fixed so browsers might all be ending up at the same numbers here).
To make this work your content box will need margins on both sides that are equal to the widths of your sidebars.
width: 100%; <-- or px width... this could be "980px" too
width: 510px; /*980-200-250=530px; -20px for 10px sidemargins
margin: 0 260px 0 210px; /* your sidebars plus 10px*/
*edit position: relative too;
margin-left:-100%; <-- this means 100% of the float above it, contentwrapper
*edit position: relative too
margin-left: -250px;<-- sometimes I need to make this a hair larger than the actual width, like -260px
Also, another thing I forgot: Safari and Chrome? someone else did not like me being able to click links inside these sidebars without adding "position: relative" to them. Not sure why, they should be "higher" than contentwrapper because they are later in source, but Safari insisted.
Now if you're saying to yourself, 510px is NOT wide enough for #content... well remember you'd have that width anyway if you had the sidebars first and floated. You always have to add up the totals of all the boxes, their padding, their borders AND their margins and it has to not go over the total width of their parent container.
Fritzing.org looks pretty awesome!