1 reply [Last post]
ttl2014
ttl2014's picture
Offline
newbie
Last seen: 5 years 41 weeks ago
Timezone: GMT-7
Joined: 2014-10-31
Posts: 2
Points: 3

Hello all,

I have a two columns layout.

On the left column is a google map div and on the right column it is displaying contents.

The contents col-1-3 can be very long and I would like the height of div map-canvas to stretch accordingly.

Can someone advise?

Thank you.
Regards J.

Here is my html code.

//google map canvas loaded by javascript

Dynamic content and this can be a very long text.

Here is my CSS

.grid {
width:95%;
height: 100%;
overflow:hidden;
background:#efefef;
border:1px solid #ccc;
padding:5px;
border-radius:3px;
margin-bottom:5px;
text-align: center;
}
[class*='col-'] {
float: left;
}
.col-2-3 {
width: 45%;
height: 300px;
}
.col-1-3 {
width: 50%;
text-align: left;
border-left:1px dotted #ccc;
padding-left: 12px;
}

#map-canvas{
height: 100%;
}

ttl2014
ttl2014's picture
Offline
newbie
Last seen: 5 years 41 weeks ago
Timezone: GMT-7
Joined: 2014-10-31
Posts: 2
Points: 3

Hello all, I have a two

Hello all,

I have a two columns layout.

On the left column is a google map div and on the right column it is displaying contents.

The contents col-1-3 can be very long and I would like the height of div map-canvas to stretch accordingly.

Can someone advise?

Thank you.
Regards J.

Here is my html code.

<div class="grid">
    <div class="col-2-3">      
        //google map canvas loaded by javascript
        <div id="map-canvas"></div> 
    </div>
 
    <div class="col-1-3">
        Dynamic content and this can be a very long text.
    </div>
</div>
 
 
Here is my CSS
 
.grid {
  width:95%;
  height: 100%;
  overflow:hidden;
  background:#efefef;
  border:1px solid #ccc;
  padding:5px;
  border-radius:3px;
  margin-bottom:5px;
  text-align: center;
}
[class*='col-'] {
  float: left;
}
.col-2-3 {
  width: 45%;
  height: 300px;
}
.col-1-3 {
  width: 50%;
  text-align: left;
  border-left:1px dotted #ccc;
  padding-left: 12px;
}
 
#map-canvas{
    height: 100%;
}