DIV does not float to right with float:right - html

Question

I am using OpenLayers 3 to make a interactive game map. I want to have side panels on the right and left side, both of them have two containers on the inside, but the map must be able to go under those containers. Makes it more visually pleasing as it goes into the margin of the two containers. I used z-index for that.
I have float: left;on the left sidepanel, and float:right; on the right sidepanel but they seem to make no diffrence.
I included LEFT and RIGHT in the titles on the top container so I know if they are floating propertly. They aren't since there is nothing on the right and the right side is above the left side.
HTML
<div id="map" class="map"><!--Map DIV, contains all of the webpage content-->
<!--Left SideBar-->
<div class="sidebar-left">
<div class="container-top">
<h3>Miscreated interactive map LEFT</h3>
<p>You can use this map to find your location and navigate through the wasteland of Miscreated.
Also you can make your own waypoints on the map and <b>share them with friends</b>! </p>
<h4>Sign in for markers &middot Make new Group? </h4>
<form>
<input type="text" name="groupname" placeholder="Group name" class="glowing-border" style="height: 20px; width: 48%;">
<input type="text" name="secret" placeholder="Secret" class="glowing-border" style="height: 20px; width: 48%;">
</form>
</div>
<div class="container-bottom">
map version: 0.1 <i>game version: .40</i>
<h3>Interactive Map Development</h3>
<h3>Upcoming changes to interactive map</h3>
<ul>
<li>User placed markers/waypoints</li>
<li>Login/Clan system</li>
<li>More resposive design</li>
</ul>
<p>I spend a lot of time developing this map, any feedback or suggestions for the development of this project are more then welcome. <b>Visit discussion on forums</b></p>
</div>
</div>
<!--Right SideBar-->
<div class="sidebar-right">
<div class="container-top">
<h3>Miscreated interactive map RIGHT</h3>
<p>You can use this map to find your location and navigate through the wasteland of Miscreated.
Also you can make your own waypoints on the map and <b>share them with friends</b>! </p>
<h4>Sign in for markers &middot Make new Group? </h4>
<form>
<input type="text" name="groupname" placeholder="Group name" class="glowing-border" style="height: 20px; width: 48%;">
<input type="text" name="secret" placeholder="Secret" class="glowing-border" style="height: 20px; width: 48%;">
</form>
</div>
<div class="container-bottom">
map version: 0.1 <i>game version: .40</i>
<h3>Interactive Map Development</h3>
<h3>Upcoming changes to interactive map</h3>
<ul>
<li>User placed markers/waypoints</li>
<li>Login/Clan system</li>
<li>More resposive design</li>
</ul>
<p>I spend a lot of time developing this map, any feedback or suggestions for the development of this project are more then welcome. <b>Visit discussion on forums</b></p>
</div>
</div>
</div>
CSS
.map {
position: relative;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
min-height: 100%;
height: 100%;
}
.sidebar-left {
position: absolute;
z-index: 3;
float: left;
width: 25%;
}
.sidebar-right {
position: absolute;
z-index: 3;
float: right;
float:right;
width: 25%;
}
.container-top {
background-color: #f2f2f2;
padding: 1% 1% 1% 1%;
margin: 2% 2% 2% 2%;
outline: none;
border-style: solid;
border-width: 3px;
border-radius: 2px;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
.container-bottom {
background-color: #f2f2f2;
padding: 1% 1% 1% 1%;
margin: 5% 2% 2% 2%;
outline: none;
border-style: solid;
border-width: 3px;
border-radius: 2px;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}

Answer 1

Alright this is getting weird, but I have solved my own problem again. Instead of using a float, I am using the left property, since I know that my sidebar is 25% wide I just need to move it 75% left.

Answer 2

You could try the clear: both; property. However, if you setup a jsfiddle for this I can have a further look. This would probably be a better solution than using absolute positioning. However, if absolute is the way for you then that is fine, but I would try to use the clear property as stated above.