Databases
StackOverflow2013
Postsdbo
POHow to create a horizontal scroll bar when shrinking the window
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create a horizontal scroll bar when shrinking the window
    text
    copied!<p>If I have a content area with a width of 1225px how do I make it so that when you shrink the page to less than that width a horizontal scroll bar appears so that that center content will always be visible (at least have the option for scrolling)? Would it involve using fixed or absolute positioning? </p> <p>In this site, you can see when you shrink the page, the horizontal scroll bar appears: <a href="http://www.websitecodetutorials.com/" rel="nofollow">http://www.websitecodetutorials.com/</a></p> <p>I don't know if it helps, but here is some of my code:</p> <pre><code>&lt;body class="fullbackground"&gt; &lt;img class="fullbackground" src="background.png" /&gt; &lt;div class="topbackground"&gt; &lt;div class="top"&gt; &lt;div class="topleft"&gt; &lt;img class="pf_logo" src="pathfinder_logo.png"/&gt; &lt;/div&gt; &lt;div class="topmiddle"&gt; &lt;h1 class="title"&gt;Pathfinder is Temporarily Unavailable&lt;/h1&gt; &lt;/div&gt; &lt;div class="topright" &gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="bar"&gt;&lt;/div&gt; &lt;div style="width:1225px; height:870px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;"&gt; &lt;div class="contentcontainer"&gt; </code></pre> <p>I used a CSS reset. Here is some of my CSS:</p> <pre><code>.bar { background-color:#365C8C; height:30px; width:auto; position:relative; padding:0 0 0 0; margin:0 0 0 0; overflow-x:hidden; } body { position:relative; padding:0 0 0 0; margin:0 0 0 0; overflow-x:hidden; height:100%; width:100%; background-color:#ADCCEB; /*background-color:black;*/ /*background: url(background.png);* /*background-size:100%;*/ } .bold { font-weight:bold; } .contentcontainer { width:825px; height:870px; margin-left:auto; margin-right:auto; margin-top:0px; padding-top:0px; /*background-color:red;*/ } .extcontentcontainer { width:825px; height:645px; margin-left:auto; margin-right:auto; margin-top:0px; padding-top:0px; /*background-color:red;*/ } img.fullbackground { position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; padding: 0 0 0 0; margin: 0 0 0 0; } img.extfullbackground { position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; padding: 0 0 0 0; margin: 0 0 0 0; } </code></pre>
 

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