CODEWITHSUNDEEP
htmlcsspositioning
TheDetailer
TheDetailer

Reputation: 299

CSS Positioning with HTML Div Images

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;
}

Upvotes: 0

Views: 45

Answers (2)

Helder Vilela
Helder Vilela

Reputation: 164

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

Upvotes: 0

durbnpoisn
durbnpoisn

Reputation: 4659

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;
}

Upvotes: 3

Related Questions