2012-01-25 5 views
0

1の幅を規定し、他の高さを指示互いの左右2つのdivを持っているための最良の方法、教えて指示:CSS - 1箱は高さ、他の幅

CSS:

body 
{ 
    width:960px; 
    margin:auto; 
} 

.wholething 
{ 
    background-color:red; 
} 

.leftside 
{ 
    width:230px; 
    background-color:blue; 
} 
.rightside 
{ 
    height:640px; 
    background-color:green; 
} 

HTML:

<div class="wholething"> 
    <div class="leftside"> 
    </div> 
    <div class="rightside"> 
    </div> 
</div> 

結果は青い箱230px、幅640ピクセル、高、および緑色のボックス730ピクセル、幅640ピクセル高のようになります。 CSSの幅または高さを変更すると、両方のボックスがそれに応じて調整されます。ちょうどCSSに追加してください。絶対必要でない限り、CSSを削除しないでください。

答えて

0
body { 
    width:960px; 
    margin:auto; 
} 
.wholething { 
    background-color:red; 
    position: relative; 
    height: 640px; 
} 
.leftside { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    bottom: 0px; 
    width:230px; 
    background-color:blue; 
} 
.rightside { 
    position: absolute; 
    left: 230px; 
    right: 0px; 
    top: 0px; 
    bottom:0px; 
    background-color:green; 
} 

これは機能します。ただし、最初のwidthに一致するように、2番目のleftを変更する必要があります。

+0

左側のボックスの高さはゼロです。 – maverick

+0

'top'と' bottom'は '0px'ですので、コンテナの高さを埋めるでしょう... –

+0

http://jsfiddle.net/maverick/AaSfB/左側のボックスの高さはゼロです – maverick

関連する問題