StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You might want to clarify how flexible you're willing to be. You can approach this multiple ways. Do you want the top and bottom borders to extend to the edge of the viewport (thus needing them to be fluid-width)?</p> <p>You can handle this using background images with <code>background-position</code> and a sliding door technique, or you can use extraneous markup to create a three-column fluid width layout with your image in the center.</p> <p>It is up to you but with the three-column technique, you could insert your extra <code>divs</code> (or whatever you would like to use) via JavaScript so you wouldn't have empty containers in your source, and use <code>border-top</code> and <code>border-bottom</code> instead of background images (thus shedding some load-time off of the page).</p> <p><em>Edit:</em> And to clarify, you want it to look something like this Ascii drawing:</p> <pre><code>_______________ |img|_____________________ </code></pre> <p><em>Edit</em>: For the fluid width layout, consult one of many numerous sources on CSS Layouts, here's a good rundown: <a href="http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/" rel="nofollow noreferrer">http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/</a> </p> <p>Then on your left and right columns, you would do <code>border-top</code> and <code>border-bottom</code> respectively (or use background-images if you want fancier borders), give your image borders and have the height of your three containers set so the borders line up together. Hope that helps.</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