Левая и правая боковые панели над OpenLayers Карта в середине

Question

Я делаю интерактивную карточку игры, используя API OpenLayers 3. Я хочу иметь четыре панели в общей сложности, по две с каждой стороны (справа & слева) и карту, показанную посередине, но карта должна располагаться под боковыми панелями. Float, z-index и т. Д. Всегда меня путают. Я нашел несколько ответов на эту тему, но я никогда не смогу совместить решения.

Текущий CSS из sidepanels и карты:

.map { 
    min-height: 100%; 
    min-width: 100%; 
    z-index: 0; 
    padding: 0px 0px 0px 0px; 
} 
.sidebar { 
    z-index:9999; 
    background-color: #f2f2f2; 
    width: 20%; 
    margin: 1% 1% 1% 1%; 
    padding: 1% 1% 1% 1%; 
    outline: none; 
    border-style: solid; 
    border-width: 3px; 
    border-radius: 2px; 
    border-color: #9ecaed; 
    box-shadow: 0 0 10px #9ecaed; 
} 
.right { float: right; } 
.left { float: left; } 

HTML из 3 DIVs:

<div id="map" class="map"></div> <!-- Map, DIV that goes in the middle --> 

<!-- Left sidebars --> 
    <div class="sidebar left"> 
     I removed the content so it is shorter 
    </div> 

    <div class="sidebar left" style="padding-top: 0px; height: 50%;"> 
     I removed the content so it is shorter 
    </div> 

<!-- Right sidebars --> 
    <div class="sidebar right"> 
     I removed the content so it is shorter 
    </div> 

    <div class="sidebar right" style="padding-top: 0px; height: 50%;"> 
     I removed the content so it is shorter 
    </div> 

Я экспериментировал с этим answer, но результаты ужасны.

Answer 1

Как выглядит ваш html? Имейте в виду, что float: right/left работает только для вложенных html-структур. что означает:

<div class="outer" style="float:right;"> 
// this div gives the attribute float to it's inner divs 
<div class="inner"> 
//this inner div will float right! 
</div> 
</div> 

Answer 2

Я переделал сайт и сумел решить мою проблему. Вместо того, чтобы держать боковые панели вне карты div, теперь они внутри. Я использовал положение: position: relative; на карте. И position: absolute; на боковых панелях. У меня возникли проблемы с поплавками, но я опубликую разный вопрос, чтобы решить thoose.