CSS для плавной Google Map с боковой панелью для результатов поиска

Question

Я планирую включить карту Google, используя javascript api, чтобы показать результаты поиска для моего сайта. Ниже, как я хочу макет

Сверху будет заголовок, в котором будет отображаться моя общая панель навигации.

Боковая панель слева - это должен быть результат поиска, показанный в виде списка. Его высота должна быть равна окну браузера, а при переполнении он должен прокручиваться.

Область карты - это карта Google, на которой я бы показал местоположение результатов поиска. Это должно быть так, чтобы он занимал все доступное пространство, оставляя заголовок и боковую панель

в основном это должно выглядеть примерно так: этот сайт или обычный поиск мест в Google

HTML-код

<div class="wrapper_test" >
    <div class="full_map" id="search_map">
         <div id="map_canvas"  style="width:100%; height:100%">
        </div>
    </div>
    <div class="test_left" id="search_result" >
    </div>
</div>

код CSS

   .wrapper_test{
    overflow:auto;
    height:100%;
    width:100%;
}
.test_left{
    width:530px;
    background-color:#006666;
    height:100%;
    float:left;
    overflow:scroll;
    overflow-style:auto;
    z-index:10;
    position:absolute;
    top:0px;
    overflow-x:hidden;
}
.full_map{

    height:100%;
    background-color:#FFCC00;
    overflow:scroll;
    overflow-style:auto;
    position:relative;
    left:530px;
    overflow-x:hidden;
    /*border:5px solid #fff;*/
}

Я не могу сделать это правильно. Полная карта занимает весь экран, а не видимое пространство справа от боковой панели.

Пожалуйста, помогите. Ссылки на примеры приветствуются.

Answer 1

Замените .full_map на наличие:

left: 530px;

до

padding-left: 530px;

Так что ваш класс .full_map выглядит так:

.full_map{

    height:100%;
    background-color:#FFCC00;
    overflow:scroll;
    overflow-style:auto;
    position:relative;
    padding-left:530px;
    overflow-x:hidden;
    /*border:5px solid #fff;*/
}