これらのフローティングディビジョンが正しく表示されないのはなぜですか？

Question

は、私は別の内側に2つの浮動divを作成しようとしています：

<div style="width:100%;height:500px;position:relative;top:15px;">   

     <div style="position:relative;float:left;width:58%;height:100%;left:10px;"> 
      <div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;"> 
       <div style="height:30px;text-align:center;position:relative; "><h2>welcome</h2></div>     
       <div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div> 
       <div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>    
      </div> 
     </div> 


    </div> 

問題は、ID「borderdiv」とdiv要素の境界外にある浮動DIV1とDIV2です。私は間違って何をしていますか？

Answer 1

浮動要素には高さがないため、#borderdivはそれらを含むように展開されません。あなたの質問は非常に具体的ではなかったので、その後、私の答えは非常に簡単です、

<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div> 
<div style="clear: both" /> 

Demo on JSFiddle.net

Answer 2

：

あなたはこれを修正するためにクリア要素を使用することができます。これは、単にdiv1とdiv2をborderdivの中に置きます：

<div style="width:100%;height:500px;position:relative;top:15px;">   
    <div style="position:relative;float:left;width:58%;height:100%;left:10px;"> 
     <div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;"> 
      <div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div> 
      <div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>    
      <div style="height:30px;text-align:center;position:relative;"><h2>welcome</h2></div>  
     </div> 
    </div> 
</div>