I am in the process of creating an interactive game map using the powerful OpenLayers 3 API. My goal is to incorporate four panels into the layout - two on each side (right & left) with the map displayed in the center, positioned below the side panels. However, concepts such as float and z-index have always been a bit perplexing for me. Despite finding several solutions on this issue, I struggle to seamlessly combine them.
Here's the current CSS styling applied to the side panels and map:
.map {
min-height: 100%;
min-width: 100%;
z-index: 0;
padding: 0px;
}
.sidebar {
z-index: 9999;
background-color: #f2f2f2;
width: 20%;
margin: 1%;
padding: 1%;
outline: none;
border: 3px solid #9ecaed;
border-radius: 2px;
box-shadow: 0 0 10px #9ecaed;
}
.right { float: right; }
.left { float: left; }
Here's the HTML structure of the 3 DIVs:
<div id="map" class="map"></div> <!-- This is where the Map goes, situated in the middle -->
<!-- Left sidebars -->
<div class="sidebar left">
(Content removed for brevity)
</div>
<div class="sidebar left" style="padding-top: 0px; height: 50%;">
(Content removed for brevity)
</div>
<!-- Right sidebars -->
<div class="sidebar right">
(Content removed for brevity)
</div>
<div class="sidebar right" style="padding-top: 0px; height: 50%;">
(Content removed for brevity)
</div>
I've been dabbling with the solution provided in this answer, but unfortunately, the outcome has not been satisfactory.