Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>When you set your element's <code>width</code> with a percentage, it is measured against that element's parent. So below, the <code>body</code> element is 100% width of the browser and <code>div.box</code> is 50% width of the <code>body</code> element.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; div.box { width: 50% } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="box"&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>You can actually change the width of the <code>body</code> and <code>html</code> elements.</p> <p>So if you have, for instance, four "slides" or "panels" that you want to be 100% width of the browser, you can give the <code>html</code> element 400% width, the <code>body</code> 100% width (still 400% of the browser because its parent is the <code>html</code> element), and each slide 25% width.</p> <p><a href="http://jsfiddle.net/flackend/cXW5w/" rel="nofollow">Here is a fiddle with an example.</a></p> <p>The only problem I see is if you have say three slides, your <code>html</code> element would be 300% and each slide 33.33333...%. So you won't have a nice clean number document.</p> <p>Fun fact, you can also mess with any element, like <code>&lt;head&gt;</code> or <code>&lt;script&gt;</code>. I.e., You can display the content of a <code>&lt;script&gt;</code> just like any other element by changing its default <code>display: none</code> to <code>inline</code> or <code>block</code>...<a href="http://jsfiddle.net/flackend/w2pnL/" rel="nofollow">fiddle</a></p>
    singulars
    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.
    3. VO
      singulars
      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