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