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

Question

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

Текущий CSS боковых панелей и карты:

.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 1

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

Answer 2

Как выглядит ваш 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>