Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>No no no, best is to give the outer container a specific width, set it's left and right margin to auto and then workout the rest. Have a look at this:</p> <pre><code>&lt;!doctype html&gt; &lt;head&gt; &lt;style&gt; #wrapper {width:600px; background: url(images/pattern.jpg) repeat left top; position: relative; margin: 0 auto; } #slideshow {position: relative; } #slideshow img {position: relative; left:0; right: 0; top:0;} #content { width: 600px; /* just for testing */ margin: 0 auto; z-index: 2; position: absolute; border: 1px #000 solid; top: 0; } #slideshow { width: 1000px; /* just for testing */ margin-left: -200px; z-index: 1; border: 1px #f00 solid; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="slideshow"&gt; slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow &lt;/div&gt; &lt;div id="content"&gt;This is content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/head&gt; </code></pre>
 

Querying!

 
Guidance

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