Looking to set up a responsive height for a div, almost there but facing some distortion when resizing the browser. Here is the fiddle file for reference: https://jsfiddle.net/td5n8ky9/10/
The issue lies in the bottom 2 divs - aiming for a grey bar the width of the screen to contain 3 'box.jpeg' files while the rest of the page below remains white. Upon browser resize, notice the height issue with the grey bar. Hoping to resolve this without Jquery and additional media queries for smoother transitions. Appreciate your help!
SOURCE CODE
<div class="container">
<nav>
<ul id="mobile_active">
<li class="link"><a href="#">About Us</a></li>
<li class="link"><a href="#">Creative</a></li>
<li id="logo"><a href="#"><img src="links/Logo.png"/></a></li>
<li class="link"><a href="#">Portfolio</a></li>
<li class="link"><a href="#">Contact Us</a></li>
</ul>
</nav>
<header><a class="mobile_menu"></a></header>
</div>
<div class="line"></div>
<div class="container">
<div id="G">
<img src="links/06-Grafiks-G.png"/>
<div id="Text-Scroller">
<h1>headline</h1>
<p>Body Text</p>
</div>
</div>
</div>
<div id="Gray"></div>
<div class="container">
<article class="newsfeed"><img src="links/box1.jpg"/></article>
<article class="newsfeed"><img src="links/box2.jpg"/></article>
<article class="newsfeed"><img src="links/box3.jpg"/></article>
</div>
<div class="container">
<div class="contact"><p>Address<br>Location</p></div>
<div class="contact"><p>Phone • Fax<br>Email</p></div>
<div class="contact"><p>Hours<br>Closed</p></div>
</div>
</div>
CSS
.container {max-width: 950px; margin: 0 auto; position: relative;}
.line {clear:both; border-bottom: medium solid #bbb1a6; overflow:visible;}
.contact{width:27.75%; padding-left:2.75%; background-color:#FFF; height: 73%; padding-right:2.75%; float:left;}
...