HTMLページのdiv表示の方向

Question

以下は、対応するdivs内の3つの異なるレポートを示すコードです。

Hookdiv、keymessagedivとWhoToVisitは今最初の2のために、それは2つの円グラフを表示します。 WhoToVisitの場合、テーブルのデータを表示します。

<div id="Hooksdiv" style="float:right"> 
    <div id="chartContainer" style="height: 50%; width: 100%;"></div><!-- 370px --> 
</div> 


<p id="demo2"></p> 

<div id="keymessagediv" style="float:left"> 
    <div id="chartContainerkey" style="height: 50%; width: 60%;"></div> 
    <div id="keyMessageChartContainerkey" style="height: 50%; width: 60%;"></div> 
</div> 

<div id="WhoToVisit"> 
    <table id="strikerate" class="dataTable" width="100%" height = "50%" style = "position: relative ;bottom: 0;left: 0;"> 
       <tr> 
        <th id="accName">Name</th> 
        <th id="PrimaryaccName">Primary Account</th> 
        <th id="plannedCall">Planned Calls</th> 
        <th id="actualCall">Actual Calls</th> 
        <th id="strike">Strike Rate</th> 
        <th id="coverage">Coverage</th> 

       </tr> 
    </table> 
</div> 

HTMLは、いくつかは、下の画像に必要に応じて、私はdivを置く助けてください。私は期待どおりに配置することができません。 添付画像を以下の位置に見つけてくださいdivs

Answer 1

最初の2つのdivは、同じ行に簡単に収まるように等幅にする必要があります。私は200pxの高さを与えて、あなたの要件に従ってそれを変更することができます。また、これを達成するためにブートストラップを使用することもできます。

<div id="Hooksdiv" style="float:right;border: 2px solid black; width: 50%; height: 200px;"> 
    <div id="chartContainer" style="height: 50%; width: 100%;"></div><!-- 370px --> 
    Hooksdiv 
</div> 


<p id="demo2"></p> 

<div id="keymessagediv" style="float:left; border: 2px solid green; width: 49%; height: 200px;"> 
    <div id="chartContainerkey" style="height: 50%; width: 60%;"></div> 
    <div id="keyMessageChartContainerkey" style="height: 50%; width: 60%;">keymessagediv</div> 
</div> 

<div id="WhoToVisit" style="border: 2px solid red;"> 
    <table id="strikerate" class="dataTable" width="100%" height = "50%" style = "position: relative ;bottom: 0;left: 0;"> 
       <tr> 
        <th id="accName">Name</th> 
        <th id="PrimaryaccName">Primary Account</th> 
        <th id="plannedCall">Planned Calls</th> 
        <th id="actualCall">Actual Calls</th> 
        <th id="strike">Strike Rate</th> 
        <th id="coverage">Coverage</th> 

       </tr> 
    </table> 
</div>