StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I know you were probably looking for a solely CSS/HTML solution, but really you're probably best off using some Javascript. There's no way to be clean and precise just using CSS & HTML. But if you run a tiny bit of JavaScript on page load and window-resize, then your divs can have actual height/width values and scale cleanly. The trick is to have the outside div get its width/height set by the JavaScript, and then all its children use % dimensions so they grow appropriately.</p> <p>Here's the basics using some JQuery:</p> <pre><code><script type="text/javascript"> //Function to get the current window dimensions. function get_window_dims() { var dims = []; if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") { dims[0] = window.innerWidth; dims[1] = window.innerHeight; } if (navigator.appName.indexOf("Microsoft")!=-1) { dims[0] = document.body.offsetWidth; dims[1] = document.body.offsetHeight; } } return dims; } function ResizeDivs { var dims = get_widnow_dims(); var div_width = Math.floor(dims[0] * 0.93); // calculating the div width to be 93% of the window width $('div.spread').css('width',div_width+'px'); } $(function() { ResizeDivs(); $(window).resize(function(){ ResizeDivs(); }); }); </script> </code></pre> <p>You could easily clean up this code to be more concise, but I figured I'd put it out here this way for you to see all the parts. If you wanted to spend the extra time, you could even add more JQuery to animate the divs when the window resizes.</p> <p>Hope this 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