-1

I've been looking up a solution to fixing an issue about 2 divs I have not appearing side by side. It's confusing because I feel like I've been doing exactly what I've seen in several examples found online. Like this StackOverflow post.

What is it I'm missing?

Thanks!

<section class = "container">
    <div id="googleMap">
      <script src="redacted-for-privacy-of-group"></script>
    </div>
    <div id="showInfo">
      <img id="customerIMG" style="width: 100%">
      <p style="width: auto; height: auto" id="customerINFO"></p>
    </div>
 </section>

css

.container {
  width: 90%;
  height: 400;
  margin: auto;
  padding: 10px;
}

#googleMap {
  width: 70%;
  height: 400px;
}

#showInfo {
  background-color: white;
  margin-left: 70%;
  height: 400px;
}
Threshold19
  • 107
  • 7
  • Div are the block level elements. It will take all available space. You need to use flex properly of CSS. – Devang Mar 12 '20 at 02:53
  • I think you are missing the key ingredient in the link you provide.. the float: left; – Markipe Mar 12 '20 at 02:57

2 Answers2

1
<section class = "container">
    <div id="googleMap">
      <script src="redacted-for-privacy-of-group"></script>
    </div>
    <div id="showInfo">
      <img id="customerIMG" style="width: 100%">
      <p style="width: auto; height: auto" id="customerINFO"></p>
    </div>
 </section>

css

.container {
  width: 90%;
  height: 400px;
  margin: auto;
  padding: 10px;
}

#googleMap {
  width: 70%;
  height: 400px;
  float: left;
}

#showInfo {
  background-color: white;
  /*margin-left: 70%;*/
  width: 30%;
  height: 400px;
  float: left;
}
Markipe
  • 616
  • 6
  • 16
0

Use float: left;

#googleMap {
  width: 70%;
  height: 400px;
  float:left;
}
Antony Jack
  • 480
  • 2
  • 16