title: Get width and height of screen window and height of div jquery
body: <p>In plain English this is the jQuery functionality i'm after:</p>
  
  <p>I need to get the width and the height of the browser window and then get the height of <code>.banner</code> div (height is automatic). If the height of <code>.banner</code> div is higher than that of the height of the browser window append <code>.title</code> div and <code>.social</code> div to the body otherwise display <code>.title</code> div and .social div within <code>.banner</code> div.</p>
  
  <p>How do I then style the two divs accordingly (<code>.title</code> and <code>.social</code>)?</p>
  
  <p><strong>EDIT:</strong>
  This is my on page load code in HTML:</p>
  
  <pre><code>&lt;div class="banner"&gt;
     &lt;div class="title"&gt;
        &lt;!--to be positioned 40px from the left--&gt;
     &lt;/div&gt;
     &lt;div class="social"&gt;
        &lt;!--to be positioned 40px from the right--&gt;
     &lt;/div&gt;
  
     &lt;img src="URL"/&gt; &lt;!-- Image determines height of DIV uses max-width --&gt;
  
  &lt;/div&gt;
  </code></pre>