How to arrange my social media icons vertically? - html

Question

I want to arrange my social media icons vertically at the top right corner of my website. I tried adding clear both, but it doesn't seem to work. Please have a look at my HtML and CSS code.
HTML code:
<div id="cover">
<div class="mediaicon">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="cover-content">
<h1>Being A Technocrat</h1>
<h2>Prashant Bagga</h2>
</div>
</div>
CSS code:
.mediaicon {
padding: 0;
margin-right: 0;
padding-top: 100px;
}
.mediaicon li {
clear: both!important;
}
.fa {
padding: 10px;
font-size: 15px;
width: 15px;
text-align: center;
text-decoration: none;
margin: 5px 5px;
border-radius: 100%;
}
.fa:hover {
opacity: 0.5;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-snapchat {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#cover {
background: url("http://moheban-ahlebeit.com/images/Texture-Wallpaper/Texture-Wallpaper-2.jpg") no-repeat center bottom;
background-size: cover;
background-attachment: fixed;
height: 800px;
position: relative;
width: 100%;
}
.cover-content {
box-sizing: border-box;
margin: 0 auto;
position: relative;
text-align: center;
top: 100px;
width: 100%;
height: 800px;
}
h1 {
color: #FFF;
font-family: 'Lobster', cursive;
font-size: 600%;
line-height: 60px;
padding-top: 0;
text-align: center;
}
h2 {
color:#FFF;
font-family: 'Josefin Sans', sans-serif;
font-size: 25px;
font-weight: 900;
text-align: center;
text-transform: uppercase;
letter-spacing: 20px;
}

Answer 1

Here is a minimal way to achieve this: (Before edit)
Just add float: right and a pseudo element:.mediaicon::after with property clear: both
.mediaicon {
padding: 0;
padding-top: 100px;
margin-right: 0;
float: right;
}
.medication::after {
clear: both;
}
Edit:
Changed both the top nav and the media icons to flexbox with different justify-content (center and flex-end)
Working fiddle

Answer 2

This answer assumes you want the text centered on the viewport.
I would actually recommend making 2 columns for this, one for the text, and one for the icons.
HTML
<div class="container">
<div class="social-menu">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="cover-content">
<h1>Being A Technocrat</h1>
<h2>Prashant Bagga</h2>
</div>
</div>
Changed CSS
.social-menu {
position: absolute;
right: 10px;
top: 10px;
}
.social-menu ul li {
margin: 20px 0px;
}
.container {
margin: 0;
padding: 10px;
background: url("http://moheban-ahlebeit.com/images/Texture-Wallpaper/Texture-Wallpaper-2.jpg") no-repeat center bottom;
background-size: cover;
background-attachment: fixed;
height: 800px;
position: relative;
width: 100%;
}
https://jsfiddle.net/fLnkvo2z/1/

Answer 3

Check your grid system. If you are using bootstrap then make grid system of your web page.
I suggest you to dnt go for margin. Use Bootstrap Instead.