Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Not sure if this is achievable using only CSS, but here's a handy snippet of JavaScript code that can help you manage fixed and percent-based page widths more effectively:</p> <pre><code>function resize() { // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight if (typeof window.innerWidth != 'undefined') { viewportwidth = window.innerWidth, viewportheight = window.innerHeight } // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) else if (typeof document.documentElement != 'undefined' &amp;&amp; typeof document.documentElement.clientWidth != 'undefined' &amp;&amp; document.documentElement.clientWidth != 0) { viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight } // older versions of IE else { viewportwidth = document.getElementsByTagName('body')[0].clientWidth, viewportheight = document.getElementsByTagName('body')[0].clientHeight } } </code></pre> <p>You can then call the <code>resize()</code> function on page load, as well as on page resize. So something like:</p> <p><code>&lt;body onload="resize()"&gt;</code></p> <p>From here, because you have a calculated width of the page, you can resize your individual <code>div</code>s accordingly:</p> <pre><code>document.getElementById("leftbox").style.width = (viewportwidth - 300)/2 + "px"; document.getElementById("rightbox").style.width = (viewportwidth - 300)/2 + "px"; document.getElementById("centerbox").style.width = 300 + "px"; </code></pre> <p>The <code>centerbox</code> maintains a fixed with of 300 pixels, while <code>leftbox</code> and <code>rightbox</code> have widths equal to the width of the screen minus 300 pixels, divided by two.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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