CSS Positioning with HTML Div Images

Question

I am trying to create a social navigation bar with a fixed position in the top right corner of the web browser. My goal is that the navigation bar will be displayed inline-block horizontally. But I cannot get it to display horizontally without it somehow jumping to the opposite side of the browser.

        <div class="social-icons-round">
            <div class="social-icon-rnd"><a href="http://www.facebook.com"><img height="34" width="34" src="file://C:\Workspace\Random\Schools\images\facebook-round.png"></a></div>
            <div class="social-icon-rnd"><a href="http://www.twitter.com"><img height="34" width="34" src="file://C:\Workspace\Random\Schools\images\twitter-round.png"></a></div>
            <div class="social-icon-rnd"><a href="http://www.google.com"><img height="34" width="34" src="file://C:\Workspace\Random\Schools\images\g+-round.ico"></a></div>
        </div><!-- end of social-icons-round -->

.social-icons-round {
    position: fixed;
    float: right;
    padding: 5px;
}

.social-icons-rnd {
    display: inline-block;
}

Answer 1

Lose the float. Set the "right" to how far from the right, and the "top" from how far from top. That's all you need.

.social-icons-round {
    position: fixed;
    /*float: right;*/
    top:10px;
    right:20px;
    padding: 5px;
}

Answer 2

You need to add the "right:0;" instead of using float.

eg:

.social-icons-round {
    position: fixed;
    top:0;            // Add this
    right:0;          // Add this
    padding: 5px;
}

And fix the name of the class " social-icons-rnd " to " social-icon-rnd ", because you use " social-icon-rnd " on the div class ( without the S in the icons word ):

You can see it working here:

http://codepen.io/anon/pen/dGNbvp?editors=110