Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This can in fact be done using straight CSS without having any restrictions on page width etc. It can be done by:</p> <ol> <li>Create a div with hidden overflow that is absolutely positioned at the top left corner of the page. Make it's width and height 100%</li> <li>Create another div that is the same, but without hidden overflow</li> <li>Add a class for divs that wrap around the content of the ones created, making its position relative and giving it whatever width you want the main page content to have</li> <li>Add content of that class in each of the divs you've created.</li> </ol> <p>The content in your first div will stay properly aligned with the content of your second div, but any of its contents that go beyond the perimeter of the window will be truncated.</p> <p>Here's a working example that keeps the image in a fixed position relative to the rest of the content, without using any JavaScript:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#widthfitter { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } #contentWrapper { width: 100%; position: absolute; text-align: center; top: 0; left: 0; } .content { width: 600px; position: relative; text-align: left; margin: auto; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="widthfitter"&gt; &lt;div class="content"&gt; &lt;img src="https://i.stack.imgur.com/U5V5x.png" style="position:absolute; top: 240px; left: 360px" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="contentWrapper"&gt; &lt;div class="content"&gt; Tested successfully on: &lt;ul&gt; &lt;li&gt;IE 8.0.6001.18702IS&lt;/li&gt; &lt;li&gt;Google Chrome 17.0.963.46 beta&lt;/li&gt; &lt;li&gt;Opera 10.10&lt;/li&gt; &lt;li&gt;Konqueror 4.7.4&lt;/li&gt; &lt;li&gt;Safari 5.1.5&lt;/li&gt; &lt;li&gt;Firefox 10.0&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </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