htmlcssruby-on-railscss-floatgmaps4rails

I am having a difficult time putting my sidebar next to my google maps - gmaps4rails

I am trying to put my sidebar with search results next to my google map(I am using gmaps4rails). I got them side by side but the problem is the sidebar does not extend the length of the map see image SideBar with google Map.

Here is my code in my view 

<div id="sideBar" class="pre-scrollable">
  <h2><%= @count%> results found </h2>
  <br>
 <% @maps.each do |map| %>
  <div>
    <div class="" id="map_<%= map.id %>">

    <h4>
      <%= link_to map.number, controller: "maps", action: "show", id: map.id%>
    </h4>


    <hr>

    </div>
  </div>
<% end %>

<%= link_to 'Return to Main Map', maps_path %>

</div> 
<div id="map_wrapper">
<div id="map" style='width: 100%; height: 100%;'></div>
 </div>

Here is my code in css:

#map_wrapper {
margin-left: 300px;
height: 800px;


}

#sideBar{
width: 300px;
height: 800px;
position: absolute;

 }

My goal is to have the side by side and the exact same length.

Solution

  • I added my comments to the code.

    Working Responsive example:

    #map_wrapper {
  margin-left: 30%; /* should match sideBar width */
  overflow: hidden; /* cut off any overflow */
  height: 100%; /* fill up main div height */
}

#sideBar {
  width: 30%; /* adjust sidebar width as percentage of main div */
  max-height: 100%; /* Never exceed main div height on small screens */
  height: 400px;
  position: absolute;
  background: #131418;
}

#sideBar span {
  color: #999;
}

.main {
  max-width: 100vw; /* set max desired width for the ENTIRE set up */
  height: 400px; /* set max desired height for the ENTIRE set up */
  max-height: 100vh; /* make sure entire setup height never exceeds device height */
}
    <!-- initilize map -->
<script>
  function initMap() {var map = new google.maps.Map(document.getElementById('map'), {center: {lat: 40.674,lng: -73.945},zoom: 12,})}
</script>


<!--Your Map setup -->
<div class="main">

  <div id="sideBar" class="pre-scrollable">
    <span>Sidebar content goes here...</span>
  </div>


  <div id="map_wrapper">
    <div id="map" style='width: 100%; height: 100%;'></div>
  </div>

</div>



<!-- Load google API in the footer. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>