StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can try a pure css solution using positioning. I am assuming that you have a fixed-size image in the centre of the page. For example's sake let's say your image is 800px wide, then </p> <ul> <li>Position the left div with left 0px, right 50% and add a right margin of 400px </li> <li>Position the right div with left 50%, right 0px and add a left margin of 400px</li> </ul> <p><strong>Example:</strong> <a href="http://jsfiddle.net/F4kay/" rel="nofollow">http://jsfiddle.net/F4kay/</a></p> <p>(note that I have assumed a smaller image width 256px for the smaller jsfiddle window)</p> <p><strong>CSS:</strong></p> <pre><code>#left { position:absolute; left:0px; right:50%; top:0px; bottom:0px; margin-right: 128px; /* image width / 2 */ background-color:#ccc; } #right { position:absolute; left:50%; right:0px; top:0px; bottom:0px; margin-left: 128px; /* Image width / 2 */ background-color:#ccc; } </code></pre> <p><strong>HTML:</strong></p> <pre><code><div id="left">Left</div> <div id="right">Right</div> </code></pre> <p>As for the height of these divs, it's up to you how you deal with this, either top / bottom: 0px or a fixed/percentage height. In the example I have used top 0px and bottom 0px.</p> <p>The trick is to basically add 2 divs, one which takes up the left half of the screen and another which takes up the right. You add a margin to the inner div edges to reveal the inner contents. I have assumed a fixed width but you could also use half of a percentage width. If your image changes dynamically with js it's just a case of updating the margins.</p> <hr> <p>For completeness, I've included a full example using this technique. I think it's a clean solution.</p> <p><strong>Example:</strong> <a href="http://jsfiddle.net/Hqpyx/" rel="nofollow">http://jsfiddle.net/Hqpyx/</a></p> <p><strong>CSS:</strong></p> <pre><code>body, .bgImage { background-image: url('http://flickholdr.com/640/1280/5'); } .flip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } body { background-position: top center; } #left { position:absolute; left:0px; right:50%; top:0px; bottom:0px; margin-right: 320px; /* image width / 2 */ background-position:top left; } #right { position:absolute; left:49.99%; right:0px; top:0px; bottom:0px; margin-left: 320px; /* Image width / 2 */ background-position:top right; } </code></pre> <p><strong>HTML:</strong></p> <pre><code><div id="left" class="bgImage flip"></div> <div id="right" class="bgImage flip"></div> </code></pre> <p>Personally I would avoid flipping the image like this. Unless you have some restriction you could just edit your background image and splice half and half of a flipped version together like</p> <pre><code>[ ] = full image { } = flipped image create an image that looks like }[ ]{ </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