DIVはfloatで右に浮かばない：右

Question

私はOpenLayers 3を使ってインタラクティブなゲームマップを作っています。私はのサイドパネルをの左右に持っていますが、両方ともの2つの容器が内側にありますが、のの下にマップがなければなりません。 2つのコンテナの余白に入るにつれて視覚的に喜ばしくなります。私はそのために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

さてさて、これは奇妙ななっているが、私は再び自分自身の問題を解決しました。フロートを使用する代わりに、サイドバーの幅が25％であることを知っているので、私は左のプロパティを使用しています。

Answer 2

clear: both;プロパティを試すことができます。しかし、このためにjsfiddleをセットアップすると、私はさらなる見通しを持つことができます。これはおそらく絶対配置を使用するよりも良い解決策になるでしょう。しかし、絶対があなたのための道なら、それは問題ありませんが、私は上記のように明確なプロパティを使用しようとします。