スタイルシートでのレイアウトについて

質問

スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。

　-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

回答No.2

karashif7

質問が2つにわかれているので続きです。
HTML内に
<br class="c-both">
と書かれている部分が2か所ありますが、その下に

<div class="contentfooter">
コンテンツフッター
</div>

と追加し、CSSには

.contentfooter{
width : 100% ;
background : #ebebeb ;
margin-bottom : 10px;
}

と追加すればよいと思います。

補足

早速のご回答ありがとうございました！
やってみたのですが、高さを変更した時、例えばサイドメニューの高さをメインコンテンツより高くした時、メインコンテンツが上に詰めて表示されるようにしたいのですが…できますか？？

回答No.1

karashif7

＞そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか？
との事ですが、
まずmainクラスを改造してheightプロパティを追加し、
.maintop {
width : 200px ;
height: 100px ;
background : #ebebeb ;
margin-bottom : 10px ;
float : left ;
}

と

.mainbottom {
width : 200px ;
height: 100px ;
background : #ebebeb ;
margin-bottom : 10px ;
float : left ;
}

を作成します、次に上部コンテンツと下部コンテンツのClass属性をそれぞれmaintop,mainbottomにします。

最後にそれぞれのheightプロパティを編集して適切な高さにします。

でやってみてください。