What am I doing wrong? CSS and HTML question.

[paulket]

I added some icons to my header template and now my logo is being "pushed" to the right of the icons as shown in the attached screenshot. My question is how do I get the logo back on the left and under the icons?

In my header template I placed...

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
<div class="socialicons2">
IMAGE LINKS
</div>
	<vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>

And in my additional.css template I placed...

#header{
height: 155px;
}

.logo-image{
margin-left: 10px;
margin-top: 75px; (this was added to keep the logo from "floating" to top/right of the icons)
}

.socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
.socialicons2{
float:left;
margin-top:7px;
margin-left:20px;
}

I link to my site is in my signature. Any help with this would be appreciated greatly.