Determining the percentage height for a div (CSS) using the Google Maps element

Question

I'm trying to create a Contact section for my site, where I will have text on the left side and a Google Maps element on the right to show our location. At the moment, I managed to get divs next to each other, but the problem is that I can not get the height of the map to match the div next to it. I looked at other questions and examples, and the most popular answer seems to be “add a wrapper and define its height and width to 100%, and then also determine the height of the div by 100%,” but that didn't work for me. I do not want to determine a fixed px height for the map, because then it will not adapt to the width of the window in the return form.

At the moment I have:

HTML

<!-- CONTACT SECTION --> <div class="third" id="contacts"> <div class="starter-template"> <h2>Contact Us</h2><br> <div class="basic-container"> <div class="contact"> <p class="lead">Location</p> <p>The student team spaces can be found at Urban Mill, located between Startup Sauna and Aalto Design Factory at the Aalto University campus in Otaniemi, Espoo (Street Address: Betonimiehenkuja 3, Espoo, Finland). Most of the lectures will also be held at Urban Mill. The accommodation of the students is at Forenom Hostel (Street Address: Kivimiehentie 2, Espoo), which is only a 5-minute walk away from Urban Mill.<br><br></p> <p class="lead">Get in Touch</p> [e-mail] </p> </div> <div class="contact"> <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7936.021807966812!2d24.832175000000017!3d60.18064199999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df58d0b88505f%3A0xaacf6d4afeea4ebb!2sUrban+Mill!5e0!3m2!1sfi!2sfi!4v1434351601478" frameborder="0" style="border:0"></iframe> </div> </div> </div> </div> 

And CSS:

 .third { position: relative; z-index: 100; width: 100%; background-color: #F7F7F7; } .basic-container { width: 70%; margin: 0 auto; text-align: justify; } .contact { width: 49%; height: 100%; display: inline-block; padding: 2%; } .contact p.lead { text-align: left; } #map { width: 100%; height: 100%; } 

The starter pattern seen in the HTML code is due to the start-up bootstrap pattern that I use. I don't believe this affects this height problem though :)

The code I am creating is:

And I would like it to be (I achieved this demo by adding a fixed px value for the map height):

There should be an easy way to handle this, but for some reason my brain does not want to collaborate with me on this. All help is much appreciated :)

Joanna

Answer 1

Maybe something like this? Hope this helps!

Working Code Link: https://jsfiddle.net/jxfw0r16/8/

I basically changed the .contact and #map of your css.

 <div class="starter-template"> <h2>Contact Us</h2><br> <div class="basic-container"> <div class="contact"> <p class="lead">Location</p> <p>The student team spaces can be found at Urban Mill, located between Startup Sauna and Aalto Design Factory at the Aalto University campus in Otaniemi, Espoo (Street Address: Betonimiehenkuja 3, Espoo, Finland). Most of the lectures will also be held at Urban Mill. The accommodation of the students is at Forenom Hostel (Street Address: Kivimiehentie 2, Espoo), which is only a 5-minute walk away from Urban Mill.<br><br></p> <p class="lead">Get in Touch</p> [e-mail] </p> </div> <div class="contact"> <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7936.021807966812!2d24.832175000000017!3d60.18064199999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df58d0b88505f%3A0xaacf6d4afeea4ebb!2sUrban+Mill!5e0!3m2!1sfi!2sfi!4v1434351601478" frameborder="0" style="border:0"></iframe> </div> </div> </div> 

 .third { position: relative; z-index: 100; width: 100%; background-color: #F7F7F7; } .basic-container { width: 70%; margin: 0 auto; text-align: justify; } .contact { position: relative; width: 49%; height: 0; display: inline-block; padding-bottom: 60%; } .contact p.lead { text-align: left; } #map { position: absolute; top: 0; left: 0; width: 100%; height: 100% } 

Answer 2

You can try. Check out this link. https://jsfiddle.net/c287hgpc/

  <div class="third" id="contacts"> <div class="starter-template"> <h2>Contact Us</h2><br> <div class="basic-container"> <div class="contact"> <p class="lead">Location</p> <p>The student team spaces can be found at Urban Mill, located between Startup Sauna and Aalto Design Factory at the Aalto University campus in Otaniemi, Espoo (Street Address: Betonimiehenkuja 3, Espoo, Finland). Most of the lectures will also be held at Urban Mill. The accommodation of the students is at Forenom Hostel (Street Address: Kivimiehentie 2, Espoo), which is only a 5-minute walk away from Urban Mill.<br><br></p> <p class="lead">Get in Touch</p> <p>[phone]<br> [e-mail] </p> </div> <div class="contact"> <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7936.021807966812!2d24.832175000000017!3d60.18064199999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df58d0b88505f%3A0xaacf6d4afeea4ebb!2sUrban+Mill!5e0!3m2!1sfi!2sfi!4v1434351601478" frameborder="0" style="border:0"></iframe> </div> </div> </div> </div> 

css codes

  .third { position: relative; z-index: 100; width: 100%; background-color: #F7F7F7; } .basic-container { margin: 0 auto; text-align: justify; width: 100%; } .contact { float: left; height: 100%; padding: 2%; width: 46%; } .contact p.lead { text-align: left; } .starter-template h2 { text-align: center; } #map { height: 100%; width: 100%; }