Databases
StackOverflow2013
Postsdbo
POHow to Make a Fixed Div go Across the Screen
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to Make a Fixed Div go Across the Screen
    text
    copied!<p><strong>Hi</strong> 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: <a href="http://thetotempole.ca/" rel="nofollow">totempole.ca</a></p> <p>Here is my HTML:</p> <pre><code>&lt;!doctype html&gt; &lt;head&gt; &lt;title&gt;The Totem Pole News&lt;/title&gt; &lt;meta name="description" content=" A totem pole themed news website posting articles on music, movies, video games, mobile applications, and news."&gt; &lt;link href="thecss.css" rel="stylesheet" type="text/css"&gt; &lt;script type="text/javascript" src="https://apis.google.com/js/plusone.js"&gt;&lt;/script&gt; &lt;script&gt;!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');&lt;/script&gt; &lt;div id="fb-root"&gt;&lt;/div&gt; &lt;script&gt;(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'));&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="socialmediaplugins"&gt; &lt;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"&gt;&lt;/div&gt; &lt;a href="https://twitter.com/share" class="twitter-share-button"&gt;Tweet&lt;/a&gt; &lt;g:plusone&gt;&lt;/g:plusone&gt; &lt;/div&gt; &lt;div id="container"&gt; &lt;div id="banner"&gt; &lt;/div&gt; &lt;div id="navbar"&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;a href="#"&gt;Link 1&lt;/a&gt; &lt;a href="#"&gt;Link 2&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;/div&gt; &lt;div id="navbar2"&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;a href="#"&gt;Link 1&lt;/a&gt; &lt;a href="#"&gt;Link 2&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;/div&gt; &lt;!-- This is the end of the container div --&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And here is my CSS: </p> <pre><code> #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; } </code></pre> <p>Thank you!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload