サブメニュー要素を下部する方法
以下のサンプルソースを作成しました。
希望する事は、メインコンテンツ #main 領域の最下部に、#submenu 要素をを固定したいと思います。
今までは、メインコンテンツ #main 領域の最下部に配置する為、#mainにて、height を設定して下に押し下げていましたが、コンテンツ毎に、height の高さが変わる為に、対処しきれなくなりました。
また、メインコンテンツ領域より、サイドコンテンツ領域の容量が多くなる場合、#submenu が上に行ってしまう事が有ります。
希望として、メインコンテンツ領域、サイドコンテンツ領域の容量にかかわらず、常にメインコンンテンツ領域の最下部に固定したいと思っています。サンプルソースでは、#submenu 要素を margin でマイナスを与え上に上げいます。
希望としてクロスブラウザ、汎用性の高い方法が有ればと思います。Windows IE6,IE7,FireFox2.x,3.x、Mac safari,FireFox2.x,3.x 等です。
以下にサンプルソースを記載します。
下記のサンプルソースだと、Firefox2.x,3.x で下にはみ出てしまします。
もう少しスマート（エレガント）な CSS でクロスブラウザの環境で実現する事は出来ないでしょうか。
<!-- サンプルソース -->
<head>
<style type="text/css">
<!--
#wrapper {
margin: 0 auto;
width: 510px;
background-color: #FFA;
border: solid 1px #F00;
}
#content {
background-color: #FFF;
border: solid 1px #F00;
}
#side {
float: left;
width: 200px;
background-color: #FFE;
border: solid 1px #F00;
}
#main {
float: right;
margin: 0px 0px 20px 0px;
width: 300px;
background-color: #FFC;
border: solid 1px #F00;
}
#submenu {
clear: both;
text-align: left;
width: 300px;
margin: -20px 0px 0px 210px;
padding: 0px 0px 0px 0px;
background-color: #FFA;
border: solid 1px #F00;
}
#submenu ul {
margin: 0;
padding: 0;
}
#submenu li {
margin: 0;
padding: 0;
display: inline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
-->
</style>
</head>
<html>
<body>
<div id="wrapper">
<div id="content" class="clearfix">
<div id="side">
<p>サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域</p>
</div>
<div id="main">
<div id="maincontents">
<p>メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域</p>
</div>
</div>
</div>
<div id="submenu">
<ul>
<li>サブメニュー：</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>
<!-- サンプルソース -->
サンプルソースで、
border: solid 1px #F00;
は、単にブロック要素が判るようにしているだけです。
補足
ありがとうございます。 しかし、ページを軽くするためにも、画像を使わないでやりたいのですが…。