- 締切済み
float & clear
質問の概要は以下の通りです。 CSSを使用しています。 可変長な画面を作成する際に、サイドバーを「float:left」で配置して「margin-left」でメイン画面を配置します。 さらに、メイン画面の中で「float:left」と「margin-left」を使って左と右に分けます。 このとき、メイン画面の中で、回り込みを防ぐために「clear:left」を使用します。 ところが、この「clear:left」がサイドバーの長さに影響されてしまい、おかしな空白ができてしまいます。 これを防ぐ方法はありますか？ もしくは、全体的に構造がおかしいならば、ご指摘ください。 すべてのソースをコピーするのは大変なので、主要な部分だけを以下に載せます。 <html> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- body{ margin:0; } #header{ border:1px #000000 solid; } #side{ margin:10px; float:left; width:200px; border:1px #000000 solid; } #infomation{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main-left{ float:left; margin:10px; width:250px; border:1px #000000 solid; } #main-right{ margin:10px 10px 10px 280px; border:1px #000000 solid; } #footer{ clear:left; border:1px #000000 solid; } .clear{ clear:left; } --!> </style> </head> <body> <div id="header"> title </div> <div id="side"> sidebar<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="infomation"> infomation </div> <div id="main"> main <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br><br><br><br><br> </div> <div class="clear">clear</div> <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br> </div> <div class="clear">clear</div> </div> <div id="footer">footer</div> </body> </html> 他にもいろいろ疑問点があり、「margin-left」ではなく「float:left」を２つ使用して左右の画面を表示した場合、通常は左右に分かれるのですが、右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。 これを現象を防ぐ方法はありませんか？ 全体の横幅を固定すればできるんでしょうが、可変長の場合にうまくいきません。
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは #side{ position:absolute; margin:10px; left:0px; width:200px; border:1px #000000 solid; height:***px; overflow:auto; } （***をmainコンテンツの高さで調整） とか？（スクロールバーが出てしまいますけど（－－；） 同様に #side{ position:absolute; margin:10px; left:0px; width:200px; border:1px #000000 solid; height:700px; overflow:auto; } #main{ margin:10px 10px 10px 230px; border:1px #000000 solid; height:670px; overflow:auto; } のようにしてレイアウト固定してしまうとか？ 他の方法としては（ちょっと試してみたのですがすぐ出来なかったのでソースは載せれないですけど） 『メニューを固定する』javascriptなどを作るとか・・・
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
見た感じmarginで左右の位置のバランスをとろうというのが問題だと思います。 通常はfloatと幅指定で調整するもんだと思いますよ？ > 右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。 > これを現象を防ぐ方法はありませんか？ テーブルレイアウトとは仕様が違いますからWorld Wide Web的にはそれが正常な挙動だと思います。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは #side{ margin:10px; position:absolute; left:0px; width:200px; border:1px #000000 solid; } のことですか？
補足
回答ありがとうございます。 なるほど、これならばclearがサイドバーの影響を受けることはありませんね。 ・・・と思ったんですが、「float」ではなく、「position」を使用してしまうと、サイドバーがメイン画面より長い場合に、フッタの位置がおかしくなってしまいます。 ん～、うまくいかない＞＜