it works fine in firefox, IE8, and opera but on safari the two boxes mix into one and go into the middle. what can i do to fix this?
Undo the way you've laid them out ( a curious mix of negative margins and excessive widths ) and try and find a simpler way, like wrapping two floated divs in a container div.
looking at your code it's so very hard to unravel to create a fix, much better to start again from basic first principles.
Learn float positioning: