StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It is possible, because I've done it.</p> <p>The trick was using negative margins on absolutely positioned divs. For some reason the browser does not attempt to provide scrolling for objects pulled out of the page in this manner.</p> <p>You can also use overflow:hidden. This will begin cropping your divs contents as the div itself shrinks (make sure the div uses a percentage or auto width so it will actually shrink).</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Cropped sides (no scrollbars)</title> <style> div.decor { border: 3px solid red; overflow: hidden; position: absolute; width: 48%; height: 500px; top: 2%; } div.content { width: 60%; height: 300px; margin: 100px auto; padding: 10px; background-color: #DDF; opacity: 0.7; position: relative; /*hmmm.. without this content goes behind decor regardless of z-index... why?*/ } </style> </head> <body> <div class="decor" style="right:50%"><img src="images/teacher.jpg" width=400 style="position:absolute;right:0px;"></div> <div class="decor" style="left:50%"><img src="images/teacher.jpg" width=400></div> <div class="content">lorem ipsum</div> </body> </html> </code></pre> <p>Demo: <a href="http://test.dev.arc.net.au/cropped_sides.html" rel="nofollow noreferrer">http://test.dev.arc.net.au/cropped_sides.html</a></p> <p>Key points:</p> <ul> <li>overflow:hidden on absolutely positioned decor divs</li> <li>right:0 on content of left decor div (forces cropping from left side)</li> <li>unpositioned content goes behind the decor regardless of z-index, but I don't know why. Simple workaround is to use position relative on your content wrapper.</li> </ul>

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