Hello everyone, I need some help with formatting my social media widgets on my website. I want them to span the entire width of the screen, align to the right, and remain fixed at the top of the page. You can check out the site totempole.ca for reference.
This is the HTML code I am using:
<!doctype html>
<head>
<title>The Totem Pole News</title>
<meta name="description" content=" A totem pole themed news website posting articles on music, movies, video games, mobile applications, and news.">
<link href="thecss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>
<body>
<div id="socialmediaplugins">
<div class="fb-like" data-href="http://www.thetotempole.ca" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<g:plusone></g:plusone>
</div>
<div id="container">
<div id="banner">
</div>
<div id="navbar">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 3</a>
</div>
<div id="navbar2">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 3</a>
</div>
<!-- This is the end of the container div -->
</div>
</body>
</html>
And this is the CSS code I have applied:
#container {
width: 960px;
height:150px;
position:relative;
margin-right: auto;
margin-left: auto;
}
#socialmediaplugins {
float:right;
position:fixed;
width:100%;
height:100px;
background-color:#999;
margin:0;
}
#banner {
background-image:url(images/totempolebanner.gif);
position:absolute;
top:20px;
width:960px;
height:150px;
}
#navbar {
float:left;
position:absolute;
top: 170px;
}
#navbar2 {
float:right;
position: relative;
top:170px;
}
Thank you for any assistance!