3つ目の上に2つのdivを配置する

Question

私は決してCSSとDivsをうまく扱うことはできません。

は基本的に私はこのような何かを作るために探しています：

編集：私が試しクリア：左;何らかの理由で私のbottom-divが他のdivから離れた位置に配置されています。このように：あなたは固定幅で動作することができれば余裕のとあなたのケースのように、境界線の

Answer 1

CSS

.top 
{ 
    width: %50; 
    float: left; 
} 
.bottom 
{ 
    clear left; 
} 

マークアップあなたの編集に関しては

<div id="containter"> 
    <div class="top">HELLO</div> 
    <div class="top">HELLO</div> 
    <div class="bottom">HELLO</div> 
</div> 

Answer 2

<div style="width:50%; float:left">Hello</div> 
<div style="width:50%; float:left">Hello</div> 
<div style="clear:left">Hello</div> 

、私は、知っている必要があります。あなたがアクションでそれを見るためにjsFiddleで見ることができ

<div class="col">Left</div> 
<div class="col right">Right</div> 
<div class="full">Bottom</div> 

CSS

div { 
    border: 1px solid black; 
    padding: 1%; 
    margin-bottom: 2%; 
} 

.col { 
    width: 47%; 
    float: left; 
} 

.right { 
    float: right; 
} 


.full { 
    clear: both; 
} 

：

編集ここ

パディング、マージンやボーダーを持つ高度なバージョン。

Answer 3

浮動divタグとコンテナとの非常に単純：

<div class="columns"> 
    <div class="left"> 
     <!-- left div --> 
    </div> 
    <div class="right"> 
     <!-- right div --> 
    </div> 
</div> 
<div> 
    <!-- bottom div --> 
</div> 

スタイル：

.left { 
    float: left; 
    width: #number#px; 
} 
.right { 
    float: right; 
    width: #number#px; 
} 
.columns { 
    overflow: hidden; 
} 

が、これはあなたに理にかなって願っています。