DIV не плавает вправо с поплавком: right

Question

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

У меня есть float: left; на левой боковой панели, а float:right; на правой боковой панели, но они, похоже, не отличаются друг от друга. Я включил LEFT и RIGHT в заголовках на верхнем контейнере, поэтому я знаю, если они плавают. Они не с тех пор, как справа ничего нет, а правая сторона находится над левой стороной.

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 <a href="#">Make new Group?</a> </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. <a href="" target="about_blank"><b>Visit discussion on forums</b></a></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 <a href="#">Make new Group?</a> </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. <a href="" target="about_blank"><b>Visit discussion on forums</b></a></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

Хорошо это становится странно, но я решил свою собственную проблему снова. Вместо использования float я использую свойство left, так как я знаю, что моя боковая панель имеет ширину 25%. Мне просто нужно переместить ее на 75%.

Answer 2

Вы можете попробовать clear: both;. Однако, если вы настроите jsfiddle для этого, я могу посмотреть дальше. Это, вероятно, будет лучшим решением, чем использование абсолютного позиционирования. Однако, если абсолютный способ для вас, тогда это нормально, но я бы попытался использовать свойство clear, как указано выше.