Defining percentual height for div (CSS) with Google Maps element

Question

I'm trying to create a "Contact" section for my website, where I'd have text on the left side and a Google Maps element on the right side to show our location. At the moment I have managed to get the divs next to each other, but the problem is that I can't seem to get the map's height to match the div next to it. I have 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 define the div's height to 100%, too", but this hasn't worked for me. I don't want to define a fixed px height for the map, since then it won't adapt to the width of the window in a responsive way.

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>
          [email protected]</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-template seen in the HTML code is there because of a starter Bootstrap template I'm using. I don't believe it affects this height issue, though :)

The code I have creates this:

And what I'd like to have is this (I achieved this demo by adding a fixed px value for the map's height):

There must be a simple way to handle this, but for some reason my brain doesn't want to cooperate with me on this. All help is very much appreciated :)

Joanna

Answer 1

You can try this Check 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>+358465943409<br>
              [email protected]</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%;
}

Answer 2

Maybe something like this? Hope it helps!

Working code link: https://jsfiddle.net/jxfw0r16/8/

Basically I've 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>
      [email protected]</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%
}