スタイルシートでのレイアウトについて
スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。
-HTML-
<div id="outline">
<div class="main">
メイン上部コンテンツ部分
</div><!-- end main -->
<div class="side">
サイド上部メニュー部分
</div><!-- end side -->
<br class="c-both">
<div class="main">
メイン下部コンテンツ部分
</div><!-- end main -->
<div class="side">
サイド下部メニュー部分
</div><!-- end side -->
<br class="c-both">
<div class="footer">
フッター部分
</div><!-- end footer -->
</div><!-- end outline -->
-CSS-
#outline{
width : 750px ;
text-align : left ;
border : solid 1px #000000 ;
}
.main {
width : 200px ;
background : #ebebeb ;
margin-bottom : 10px ;
float : left ;
}
.side {
width : 540px ;
background : #ebebeb ;
margin-bottom : 10px ;
float : right ;
}
.c-both {
clear : both ;
}
.footer{
width : 100% ;
background : #ebebeb ;
}
そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか？
あと、メイン上部コンテンツ部分・サイド上部メニュー部分、メイン下部コンテンツ部分・サイド下部メニュー部分の下に、同じように行を追加したいのですが、どうしたら良いでしょうか？
スタイルシートの段組みで、非常に困っています。
助けて下さいm(_ _)m
