Floated items with vertical alignment

Question

I don't know why but my floated images div class="social">...</div> stopped working properly. My goal: align images vertically, like a column.

Check the design, its easier to understand: design preview

They were on the right side of the window/browser screen, with :hover effect but now its not working.

Whats wrong with the code?

Heres my JSfiddle

HTML

<div id="home">

        <div id="nav">
            <div class="container clearfix">
                    <ul id="menu">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#services">Serviços</a></li>
                        <li><a href="#team">Equipa</a></li>
                        <a href="#" id="logo" alt="Style Euclides"><img src="http://styleeuclides.site50.net/img/logo.png" alt="Logo Style Euclides" width="90px" height="40px"></a> 
                        <li><a href="#space">Espaço</a></li>
                        <li><a href="#gallery">Galeria</a></li>
                        <li><a href="#contact">Contatos</a></li>
                    </ul>
            </div>
        </div>

                <div class="social">
                    <a href="http://www.facebook.com" target="_blank"><img src="http://styleeuclides.site50.net/img/fb.png" alt="facebook"></a>
                    <a href="http://www.instagram.com" target="_blank"><img src="http://styleeuclides.site50.net/img/ins.png" alt="instagram"></a>
                    <a href="http://www.twitter.com" target="_blank"><img src="http://styleeuclides.site50.net/img/twi.png" alt="twitter"></a>          
                        </div></div>

CSS

#home .social{ /* SOCIAL ICONS */
    display: inline-block;
    position: fixed;
    z-index: 1;
}

#home .social a{
    float: right;
    padding: 1px;
    opacity: 0.7;
    margin-right: auto;
    margin-left: auto;
}

#home .social a:hover{
    opacity: 1.0;
}

#home .social img{
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0; 
    margin-top: 2px;
    margin-top: 150px;
}

Answer 1

Here you go mate, sorted it all out for you. http://jsfiddle.net/aq3T7/

#home .social{ /* SOCIAL ICONS */
    position: fixed;
    top: 110px;
    right: 10px;
    z-index: 1;
}

#home .social a{
    opacity: 0.7;
}

#home .social a:hover{
    opacity: 1.0;
}

#home .social img{
    float: right;
    clear: right;
    margin-top: 5px;
}

Answer 2

Updated your fiddle: - added top:150px; and width:40px; to the social div, and reomved margin-top of the images.

#home .social{ /* SOCIAL ICONS */
float: right;
display: inline-block;
position: fixed;
z-index: 99;
right: 0;
width:40px;
top:150px;
}

#home .social a{
padding: 1px;
opacity: 0.7;
margin-right: auto;
margin-left: auto;
}

#home .social a:hover{
opacity: 1.0;
}

#home .social img{
}

Answer 3

I've updated your fiddle to reflect what I think you want.

http://jsfiddle.net/aq3T7/1/

#home .social{ /* SOCIAL ICONS */
float: right;
display: inline-block;
position: fixed;
z-index: 99;
right: 0;
top:150px;
}

#home .social a{
clear:both;
display:block;
padding: 1px;
opacity: 0.7;
margin-right: auto;
margin-left: auto;
}

#home .social a:hover{
opacity: 1.0;
}

#home .social img{
margin-top: 2px;
}

Furthermore, I've also removed some unnecessary margins that you had on some elements. But basically, your A tags are inline elements, and they will naturally display beside one another. If you make them block elements, they will take up their own horizontal row (up to the width of their parent). This is the most important and fundamental concept of CSS.

Answer 4

Try this:

   #home .social{ /* SOCIAL ICONS */
        position: absolute;
        z-index: 1;
        right: 0;
    }

    #home .social a{
        float: right;
        padding: 1px;
        opacity: 0.7;
        margin-right: auto;
        margin-left: auto;
    }

    #home .social a:hover{
        opacity: 1.0;
    }

    #home .social img{

    }