CSSアライメントの問題

Question

私は実際に3列のレイアウトを持っています。 これらの列のうちの3つが1つの部門内に配置されています。 これらの列を整列するためにfloatを使用しました。

#col1 { 
    float: left; 
    width: 15%; 
    background: #93A5C4; 
    padding-bottom: 10px; 
    min-height:450px; 
} 
#col2 { 
    padding: 10px 0; 
    width: 70%; 
    float: left; 
    min-height:450px; 
    position:relative; 
} 
#col3 { 
    float: left; 
    width: 15%; 
    background: #93A5C4; 
    padding: 10px 0; 
    min-height:450px; 
}` 

これらの列が展開すると、これらを保持するコンテナも展開する必要があります。どうすればよいですか。 私はposition：relativeを使用するように展開する必要があります。

Answer 1

また、折り返しdivのパーセントを使用することもできます。

ラップされたdivの％を取得するので、列にある値を保持します。

例：

HTML：

<div id="wrapper"> 
    <div id"col_1"> 
    </div> 
    <div id"col_2"> 
    </div> 
    <div id"col_3"> 
    </div> 
</div> 

とCSS：

#wrapper{ 
    width:90%; 
} 
#col_1{ 
    width:15%; 
    float:left; 
} 
#col_2{ 
    width:70%; 
    float:left; 
} 
#col_3{ 
    width:15%; 
    float:left; 
} 

Answer 2

ブロック要素は、そのコンテナのサイズに展開します。パーセンテージ幅は、包含要素の幅を参照します。

Answer 3

あなたは、より多くのコードを見てのためのHTMLを必要とするあなたは、ラッパーのdiv

<div class="clear"></div> 

//the css 
.clear{clear:both;} 

を閉じる前にフロートをクリアし、ラッパーのdiv