I'm not sure where the margins come into this exactly but if you want margins then you will have to apply margins either to the plugin code or to an existing wrapper. I assume you added the div called .sociable yourself so applying a margin shouldn't be a problem.
The icons cannot fit into one line because that content section is only 550px wide and the icons in one line come to about 600px even if you squash them together and indeed there is even less width if they are next to a floated image. You are better off letting them wrap to two lines otherwise you will make it too awkward trying to have one long line in that left column because you would have to close the content div and then start another div that is 100% wide and then restart the content div again afterwards which means that the right column can't be anywhere near.
You could force the issue but you would have to change the html and add classes to each social div to identify them separately.
The inline styles are for example only but you would need to add extra classes instead.
<div class="sociable" style="float:left"> etc.... </dv>
<div class="sociable" style="float: none; margin: 40px -80px 0 0;">
And then applies the styles to s1 and s2 as appropriate.
<div class="sociable s1"> etc.... </dv>
<div class="sociable s2">
That's a lot of work especially if you are not sure of how to apply things to that page.
margin: 40px -80px 0 0;
You would be better off just having the social icons at either the top or the bottom of the page content in a div of their own that spans the full width.
For IE7 just add the code I gave you to the end of the CSS file.
I'm afraid I am going to have to close the thread now because it's not fair that other members cannot take part in this topic because of the adult content in the link that was removed.