stop floated div at specific min-width instead of overlapping

Question

jsfiddle example

To put it short.. The whole page is dynamic. Coded to decrease in size until a min width. The custom code begins after #contentLIVE.

The solution i request is allowing the blue div to sit flush on the right of the container and stop after the min-width is set. If you increase the window size past the min-width. The blue div sits flush, but as soon as you hit the min width it continues to move.

blue div

#black {width:20px;height:59px;background-color:blue;z-index:2;
position:relative;float:right;margin-right:80px;}