CSS class background image horizontal positioning?

css, html

Solution

Let's try this:

#socialController {
width: 318px;
background-color:#fff;
display: block;
}

Like this:

http://jsfiddle.net/CQTus/

Problem

So I'm trying to position a facebook/youtube/twitter button on a div that is 318 pixels across (so about 106 pixels per button). Expected Ouput (source: iforce.co.nz) I'm using float and display:inline on each button as its being rendered. I've provided my code below. CSS CODE ``` #socialController{ width: 318px; background-color:#fff; display: inline; } .socialmedia { width:106px; height:20px; float:left; vertical-align:middle; background-position:center center; background-repeat:no-repeat; background-color:#373737; } .socialmedia:hover{ background-color:#444 } #sm_fb{ background-image:url(../img/fb.png) } #sm_tw{ background-image:url(../img/tw.png) } #sm_yt{ background-image:url(../img/yt.png) } ``` HTML CODE ``` <div id="socialController"> <a href="#" class="socialmedia" id="sm_fb" title="CSGONZ Facebook"></a> <a href="#" class="socialmedia" id="sm_yt" title="CSGONZ Youtube"></a> <a href="#" class="socialmedia" id="sm_tw" title="CSGONZ Twitter"></a> </div> ``` But the problem is I'm not reaching my expected Horizontal positioning.. but instead I'm getting a vertical positioning of the buttons. Actual Output (source: iforce.co.nz) What is the problem? and what am I missing? to achieve a horizontal layout?

Original source