menu - メイン コンテンツが画面の端に合わせて拡大縮小される固定サイド メニューをどのように作成しますか?

Question

固定幅のサイド メニューがあり、メイン コンテンツが画面の残りの部分に合わせて拡大縮小されるレイアウトをどのように作成しますか?

マークアップのサンプルを次に示します。

<ul id="sideMenu">
   <li>....</li>
</ul>
<div id="mainContent">
   ... everything else ...
</div>

これは可能ですか？

また、mainContent に最小幅を設定でき、これがすべてのブラウザで一貫して動作するようになれば素晴らしいことです ;)

Answer 1

sideMenu をフロートさせてから、それに合わせて mainContent のマージンを設定します。これにより、mainContent が sideMenu を取り囲むことがなくなります。

#sideMenu{float:left;width:200px;}
#mainContent{margin-left:200px;}

Answer 2

cellspacing と cellpadding を 0 に設定してテーブルにコンテンツを配置することで可能になる場合があります。td の幅も 100% に設定します。あなたがしなければならないのは、試行錯誤の方法です。