CSS Positioning with AddThis

I currently have a Table "solution" to formatting the AddThis Div Buttons. You can see this at: http://www.siding4u.com/save-on-siding.php

At the top of the page it shows correctly:

Here's the Code (work around) for that:

<table align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="60%" align="right"><img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23" /></td>
    <td width="40%" align="left"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=siding4u"></script>
<!-- AddThis Button END --></td>
  </tr>
</table>

I'm having/wanting to convert all of my table layouts to CSS but I can't seem to get the AddThis buttons to cooperate. They always seem to "LEFT JUSTIFY" or BREAK Somehow - no matter what I try.

I'm guessing this is an easy fix but I'm one of those CSS "block heads" that can't seem to whip the CSS into shape.

Please help...

In css aligning images is based on their position on the page rather than their justification ( the elements with class addthis_button_preferred_1...n should probably control this ) In a table you justify it left/center/right etc. while with CSS your aim is to align the in a way that it's child elements will be in the middle.

HTML:

<div id='wrapper'> <!-- parent div containing the help-us-help-you image and the buttons-->
    <div id="help_us"><!-- float:left because we want the image div and the button dive to be besides eachother -->
        <img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23"/>
    </div>
    <div id='buttons'><!-- this div should also be floated left and have padding, to align the buttons correctly -->

        <!-- each of the link elements should get some padding -->
        <a class="addthis_button_preferred_1 button_preferred"></a>
        <a class="addthis_button_preferred_2 button_preferred"></a>
        <a class="addthis_button_preferred_3 button_preferred"></a>
        <a class="addthis_button_preferred_4 button_preferred"></a>
        <a class="addthis_button_compact button_preferred"></a>
        <a class="addthis_counter addthis_bubble_style button_preferred"></a>
    </div>
</div>

The whole example is online on this fiddle, and should hopefully help with the alignment, and is a pure CSS solution, no tables there at all!

p.s. As a side note, I do recomend you use jsfiddle for CSS/HTML/javascript issues, it does help us see the problem better, and make changes faster.

EDIT For the second issue:

<div align="center" style="margin-bottom:0; margin-top:5px;"> 
<div id='wrapper'> 
...
​</div>
...
</div>

For this element the height for some reason is 48 px, which creates a gap between the two elements. So apply a height to it, change:

style="margin-bottom:0; margin-top:5px;"

TO:

style="margin-bottom:0; margin-top:5px;height:23px;"