angelfalls
New Member
I'm using a responsive image inside a container div that automatically scales when the browser is resized. After this div is a contact form div that I have hidden using jQuery, and is shown using an onclick function. The issue I have is once the image container div gets to a certain size, it will push up and leave a giant gap where the contact div is supposed to be - I've tried to fix this with positioning but haven't had any luck. Is there a way to force the browser height to stick to the bottom of the image container div, and then increase to fit the contact div when the user performs this onclick function?Any help would be appreciated.Here is my code\[code\]<div class="eighth panel"> <div class="about-us"> <span class="about-img"> <img class="about" src="http://stackoverflow.com/questions/13737293/images/about-us-open.png" alt="About Image Open" /> <h3>About Us</h3> </span> <section class="about-us"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </section> </div> <div class="fashion"> <span class="fashion-img"> <img class="fashion" src="http://stackoverflow.com/questions/13737293/images/fashion-open.png" alt="Fashion Image Open" /> <h3>Fashion</h3> </span> <section class="fashion"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </section> </div> <div class="food"> <span class="food-img"> <h3>Food</h3> <img class="food" src="http://stackoverflow.com/questions/13737293/images/food-open.png" alt="Food Image Open" /> </span> <section class="food"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </section> </div> <div class="video"> <span class="video-img"> <img class="video" src="http://stackoverflow.com/questions/13737293/images/video-open.png" alt="Video Image Open" /> <h3>Your place to peek</h3> </span> </div> <figure> <img class="close" src="http://stackoverflow.com/questions/13737293/images/video-close.png" alt="Video Close Image" /> <video width="320" height="240" controls="controls"> <source src="http://stackoverflow.com/questions/13737293/video/movie.mp4" type="video/mp4"> <source src="http://stackoverflow.com/questions/13737293/video/movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <!-- <iframe width="425" height="300" src="http://www.youtube.com/embed/DyGWZIlrSNw?wmode=opaque" frameborder="0" allowfullscreen></iframe> --> </figure> <img class="cityscape" src="http://stackoverflow.com/questions/13737293/images/cityscape.jpg" alt="City Scape" /></div><div class="separator"> <span class="img-swap down"></span></div><div class="ninth panel"> <section id="contact"> <h1>Contact Us</h1> <mark id="message"></mark> <form method="post" action="includes/contact.php" name="contactform" id="contactform" autocomplete="on"> <fieldset> <div> <label>Name</label> <input name="name" type="text" id="name" placeholder="Enter your name" /> <span class="error" id="err-name">Please enter name.</span> </div> <div> <label>Email</label> <input name="email" type="email" id="email" placeholder="Enter your Email Address" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$" /> <span class="error" id="err-email">Please enter e-mail.</span> <span class="error" id="err-emailvld">E-mail is not a valid format.</span> </div> </fieldset> <fieldset> <label>Comments</label> <textarea name="comments" cols="40" rows="4" id="comments" placeholder="Enter your comments" spellcheck="true"></textarea> </fieldset> <input type="submit" class="submit" id="submit" value="http://stackoverflow.com/questions/13737293/Submit" /> <div class="error" id="err-form">There was a problem validating the form.</div> <div class="error" id="err-timedout">The connection to the server timed out.</div> <div class="error" id="err-state"></div> </form> <div id="ajaxsuccess"><h2>Your message has been sent!</h2></div> <ul class="icons"> <li><a href="http://stackoverflow.com/questions/13737293/#" target="_blank"><img src="http://stackoverflow.com/questions/13737293/images/facebook.png" alt="Facebook"></a></li> <li><a href="http://stackoverflow.com/questions/13737293/#" target="_blank"><img src="http://stackoverflow.com/questions/13737293/images/twitter.png" alt="Twitter"></a></li> <li><a href="http://stackoverflow.com/questions/13737293/#" target="_blank"><img src="http://stackoverflow.com/questions/13737293/images/device.png" alt="Device"></a></li> </ul> <span id="top">Play it Again!</span> </section> <div id="imagePan"> <div class="container"> <div> <img src="http://stackoverflow.com/questions/13737293/images/parallax-bg.jpg" class="panning" alt="Parallax Background" /> </div> </div> </div></div>\[/code\]I've included the following images of what it looks like at the moment.When the gap begins to appear
At maximum resize
When the contact div is shown
