StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly. because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.</p> <p>as far as I know, the only element that can scale reserving his ratio is an <code><img></code>, so we will use the <code><img></code> to our advantage.</p> <p>SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a <code>13X10</code> ratio (like in your example), so we'll use <code><img src="http://placehold.it/13x10" /></code>. that image will have a fixed height of <code>100%</code> the body, and now the width of the image scales with respect to the ratio. so the width of the image is <code>130%</code> height of the body.</p> <p>that image is enclosed within a div, and that div has <code>inline-block</code> display, so he takes exactly the size of his content. witch is the size you want.</p> <p>we remove the image from the display by using <code>visibility: hidden;</code> (not <code>display:none;</code> because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).</p> <p>That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.</p> <p>Here is the complete <strong>HTML</strong>:</p> <pre><code><div class="Scalable"> <img class="Scaler" src="http://placehold.it/13x10" /> <div class="Content"></div> </div> </code></pre> <p>and this simple <strong>CSS</strong>:</p> <pre><code>html, body, .Content { width: 100%; height: 100%; margin: 0; padding: 0; } body { text-align: center; } .Scalable { position: relative; display: inline-block; height: 100%; } .Scaler { width: auto; height: 100%; margin-bottom: -5px; visibility: hidden; } .Content { position: absolute; top: 0; background-color: black; } </code></pre> <p>Here's a <a href="http://jsfiddle.net/avrahamcool/jgjTN/1/" rel="nofollow">Fiddle</a> (don't forget to refresh after resizing) I recommend you to copy this code to your local machine and try it there rather then within the fiddle.</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