Google map inside the container

Question

I am having problems placing the Google map inside my container, which gives some loading problem, when I put it in any of my containers, it will only work outside of all my containers :(

<section class="lookingfor"> <ul class="clearfix"> <li class="homeMap"> <div id="map_canvas" style="width: 100%; height: 100%"></div> </li> </ul> </section> 

looking for a class:

 section.lookingfor .skills div.text {font-family: 'Open Sans', sans-serif; color:#666; font-size:14px; line-height:22px;} section.lookingfor ul li.homeMap {width: 100%; height: 100%;} 

Not sure if the first line affects: O

Clearfix:

 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

class homeMap:

 section.lookingfor ul li.homeMap {width: 100%; height: 100%;} 

Thanks in advance!:)

Answer 1

Set

 position:relative; 

and use a fixed height and width instead of%, because% will give you 0 heights. "This is because the div is trying to be a percentage of the size, but by default it has an undefined height."

fix the problem. Thanks to those who looked :)