CODEWITHSUNDEEP
htmlcss
Kelsey Nealon
Kelsey Nealon

Reputation: 61

How to Make a Fixed Div go Across the Screen

Hi there, I am looking for a way to make my div box with all of my social media widgets at the top of the website to go across the whole screen, float to the right, and stay at the very top of the page. Here is the site's link: totempole.ca

Here is my HTML:

<!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 here is my CSS: 

    #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!

Upvotes: 1

Views: 1605

Answers (1)

user2896540
user2896540

Reputation: 228

Use "left:0", "top:0", and for the very top-positionning: "top:0".

#socialmediaplugins {
    text-align: right;
    position: fixed;
    background-color: rgb(153, 153, 153);
    margin: 0px;
    top: 0;
    left: 0;
    right: 0;
}

Upvotes: 1

Related Questions