Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Would it be acceptable for the the header to shrink to fit the window? Also, do you need this to be a pure HTML / CSS solution?</p> <p>edit:</p> <p>Here's a little script I just wrote that will resize both divs to the size of the browser window. It doesn't require any libraries (like jQuery).</p> <pre><code>&lt;script type="text/javascript"&gt; var clientWidth = document.documentElement.clientWidth; document.getElementById('headerwrap').style.width = clientWidth + "px"; document.getElementById('header').style.width = clientWidth + "px"; &lt;/script&gt; </code></pre> <p>Or if you want a gap at both sides you could do something like:</p> <pre><code>var padding = 50; document.getElementById('header').style.width = (clientWidth - (padding * 2)) + "px"; document.getElementById('header').style.left = padding + "px"; </code></pre> <p>So ya, in summary:</p> <pre><code>&lt;script type="text/javascript"&gt; var clientWidth = document.documentElement.clientWidth; document.getElementById('headerwrap').style.width = clientWidth + "px"; var padding = 50; document.getElementById('header').style.width = (clientWidth - (padding * 2)) + "px"; document.getElementById('header').style.left = padding + "px"; &lt;/script&gt; </code></pre> <p>Also, change the wrapper to <code>position: absolute; top: 0px</code> and the inner div to <code>position: absolute; top: 0px;</code></p> <p>Hope this helps!</p> <pre><code>Also, you have a forward slash in your wrapper div that needs to go :) </code></pre>
    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. This table or related slice is empty.
    1. 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