- ベストアンサー
width100%とfloat
左右分割サイトで ・左側メニューは160px(#menu) ・右は残りすべて(#main) というものを作りたいのです。 #menu {width:160x;float:left;} にすると、#menuは左寄せになりますが #mainは右側に寄ってくれません（width属性を指定していないから）。 tableレイアウトを使用せずにこのようなことができますか？ 条件は ・HTML 4.01 Strict ・tabelを使用しないレイアウト ・フレーム使用なし です。 お願いします！
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
仰られるレイアウトを多くのモダンブラウザで実現することは容易ではありません。 クロスブラウザの実現をある程度考慮したソースを示します。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>TITLE</title> <style type="text/css"> * { margin:0; padding:0; } #sidebar { z-index:30; position:relative; float:left; width:160px; margin-right:-160px; background-color:#f99; } #content_wrap { z-index:10; position:relative; float:left; min-width:100%; background-color:#9f9; } * html #content_wrap { width:100%; } #content { z-index:20; position:relative; margin-left:160px; background-color:#99f; } /* 高さを確保する場合 */ html , body , #container { height:100%; } #content_wrap:after { display:block; clear:both; content:""; } #content_wrap { min-height:100%; } * html #content_wrap { height:100%; } </style> </head> <body><div id="container"> <div id="sidebar"> メニュー部 </div> <div id="content_wrap"><div id="content"> 本文部 </div></div> </div> </body> </html> ●高さを確保する場合について 本文などの内容がブラウザの縦表示領域に収まる場合は100%が確保され、超える場合は内容の長辺ボックスの下底に揃います。 ただし、NN7.1などの一部のブラウザでは実現しません。 一部で実現しない件については詳しくないので詳細は割愛します。 ●スクロールを本文部のみに適用 overflowプロパティの指定などを「頑張れば」実現できるかもしれません。 モダンブラウザのみを想定した場合でも、これを実現するにはある程度の考察が必要です。 今回、これについては紹介を割愛します。 今回提示した構成は、参考URL先のネガティブマージンを参考にしています。
その他の回答 (3)
- aoi_hito
- ベストアンサー率50% (1/2)
#mainにwidthを入れないとfloatは難しいんじゃないでしょうか。 positionを使ってみました。 CSS側 #content { position: relative; width: 100%; } #main { margin-left: 165px; } #menu { position: absolute; top: 0; left: 0; width: 160px; } HTML側 <div id="content"> <div id="main"> </div> <div id="menu"> </div> </div>
<div id="menu" style="float:left;width:160px"></div> <div id="main" style="float:right"></div> <div style="clear:both"></div>
- kaz-5919
- ベストアンサー率26% (45/170)
http://css.uka-p.com/ ここにのってますよ
- 参考URL：
- http://css.uka-p.com/
