- ベストアンサー
入れ子にしたfloatのclear
初めてこちらを利用させていただきます。 CSSで縦3段、例えば上から『HEADER』、『MAIN』、『FOOTER』などとの段組を作成し、中央の『MAIN』内に『MENU』と『CONTENTS』の左右2段の段組をfloat:leftを利用して作成し、テンプレートとして利用しようとしています。 このテンプレート部分は、『MENU』の幅のみ固定で、『CONTENTS』は可変幅のレイアウトとしております。ここまでは順調に作成できたのですが、肝心のコンテンツの作成でつまづきました。 『CONTENTS』内に、更にfloat:leftで左右にDIVを配置したブロックを複数作ろうとした場合、2つ目のブロックを配置した時、1つ目の右側DIVの高さが1つ目左側DIVよりも高さが低い場合、2つ目以降のブロックが1つ目左側のDIV右に回りこんで表示されてしまいます。これは1つ目のブロックを配置した後、float:leftをclearしていないから当然だと思います。 そこで、1つ目のブロックの後にclearを摘要（<br />などに）させると、テンプレートの、『FOOTER』直上に2つ目のブロックが配置されてしまいます。1つのclearで入れ子になったfloat:leftが全てclearされてしまう様です。 これが『仕様』と言われればそれまでですが、TABLEや、固定幅のfloat：right等を使用すれば回避できそうですが、TABLE脱却・リキッドレイアウトをここまで実現できたのに、肝心のところで妥協するのも悔しい気がします。 まさか、こんな単純な事で丸一日悩むとは思いませんでした。web上を検索して回ったのですが、良い解決策が見つからず、こちらにおすがりした次第です。文章ではうまく表現できずわかりにくいかもしれませんが、何か回避作があれば教えて下さい。
- go_nta
- お礼率100% (15/15)
- CSS
- 回答数7
- ありがとう数11
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
前回の回答 > 「詳細度」の高い部分(*1)で2つ目のブロックに「clear:left」を指定 はまちがいでいした。すいません。 float(left)したブロックは包括ブロック（の左辺）を超えてはならないという規則がありますが、clearは例外になると明記さているのでfloatよるレイアウトの限界だと思います。 意図とは異なるような気もしますが、 menuブロックの高さが常にcontentsブロックの高さより低いと決められるのであればabsoluteを利用して配置する事はできそうです。 #main{ position:relative;/*追加*/ } #menu{ /*float: left; 削除*/ position:absolute;/*追加*/ } .data{ clear:left;/*追加*/ }
その他の回答 (6)
- steel_gray
- ベストアンサー率66% (1052/1578)
#3について。 ごめんなさいです。IEでの確認してませんでした。何かバグに触れてしまったようです。 別に幅の指定は必要ではないです。#3もfirefoxやoperaでは問題ないです。 ですが、状況によっては指定する事でうまくいくのかもしれませんね。
お礼
steel_grayさん申し訳ございません。nuruhho44さんと混同しておりました。 やむを得ず、left_data・right_dataのdiv要素の使用を止め、左側にfloat:leftを適用したimg要素（に限定）、右側にh*要素とp要素をそのまま流し込み、p要素の高さをimg要素と同じ高さをdata毎に個別に指定することにしました。 もちろん、p要素下部に必要以上の余白が出来ることになりますが、ウインドウを小さくして指定した高さ以上にテキストが回り込んでも、レイアウトが破綻せずに思ったとおりにレイアウトできています。 WinIE5.5 IE6.0 Netscape6 Opera Firefox MacIE5でほぼイメージ通りとなっております。ウインドウサイズもSVGA以上では破綻しません。300px以下にするとさすがに破綻するブラウザも出てしまいますが・・・ 個人でやっていて独学ですので経験者のお話大変為になりました。また質問したときはぜひお願い致します。ありがとうござました。
- nuruhho44
- ベストアンサー率57% (38/66)
#4です。 全然的外れなことかもしれませんが、以下は私が以前やった方法です。役に立たなかったらごめんなさい。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <SCRIPT type="text/javascript"> <!-- AD = new Array("あ","い","う","え"); function Fgh() { for (i=0; i<4; i++) { r = Math.floor(Math.random() * 500); var A = ""; for (j=0; j<r ; j++) { A += AD[i]; } document.getElementById("dd"+i).innerHTML = A; } } //--> </SCRIPT> <STYLE type="text/css"> <!-- * { box-sizing : border-box; } * { -moz-box-sizing : border-box; } .header { width : 100%; background-color : aqua; } .menu { width : 200px; height : 20em; position : relative; z-index : 2; background-color : lime; } .contents{ width : 100%; margin-top : -20em; padding-left : 200px; } .footer { clear : left; width : 100%; background-color : pink; } .c1 { clear : left; } .d1 { width : 49%; float : left; } #dd0 { background-color : #ffff00; } #dd1 { background-color : #ff00ff; } #dd2 { background-color : #00ffff; } #dd3 { background-color : #cccccc; } --> </STYLE> </HEAD> <BODY onload="Fgh();"> <DIV class="header">header<BR>header<BR>header</DIV> <DIV class="menu">menu<BR><A href="javascript:Fgh();">コンテンツ変更</A> </DIV> <DIV class="contents"> <DIV class="c1"> <DIV class="d1" id="dd0"></DIV> <DIV class="d1" id="dd1"></DIV> </DIV> <DIV class="c1"> <DIV class="d1" id="dd2"></DIV> <DIV class="d1" id="dd3"></DIV> </DIV> </DIV> <DIV class="footer">footer<BR>footer</DIV> </BODY> </HTML> スクリプトはコンテンツ内の各ブロックに適当に文字を放り込むためのものです。判り易いように各ブロックに背景色を入れてあります。 これの問題は『MANU』ブロックの高さより『CONTENTS』ブロックの高さが低い場合は、『FOOTER』が『MANU』に重なるということですね。
お礼
サンプルコード試させて頂きました。なかなかいい感じですが、やはり各ブロックを『１文字』などにするとおっしゃってるようにfooterが回り込みますね。 情報量の少ない小規模サイトばかり作ってるので（笑）厳しいですね。とはいえ大変参考になりました。ありがとうございます。
補足
nuruhho44さんすみません・・・ずーっとsteel_grayさんが書き込んでるのかと思ってました（汗）『#4』で初めて気付きました・・・大変失礼しました。 わざわざサンプルコードありがとうございます。まだ確認できていませんが、明日にでも試させてもらおうと思います。
- steel_gray
- ベストアンサー率66% (1052/1578)
補足。 対応しているブラウザがないようなのが残念ですが、御希望のようなレイアウトは実はフロートよりもcompactボックスが適しているのではないかと思います。 →参考URL #menu ,.left_data{ display:compact; /*float:left; floatはさせずに、右側に置きたいブロックのマージンの中に配置*/ : : }
お礼
>compactボックス 初めて聞きました（汗） >対応しているブラウザがない CSS3が策定されても、結局現在のブラウザが対応してくれなければ使用する事はできませんよね。ヘタに今のブラウザのバグがフィックスされても、バグを利用した個別ブラウザのレイアウトが破綻するだけですし・・・ ヘタなプロパティ作るよりもTABLE要素の機能そのままに名前を変えてレイアウト用の要素を作ってくれる方が・・・（笑） なんかどんどん『愚痴』になってきました・・・すみません。
- nuruhho44
- ベストアンサー率57% (38/66)
floatを使ってレイアウトすると、ブラウザによる違いが大きく、なかなかうまくいきませんよね。 並べるブロックの高さが違うと回り込みされてしまいますので、ブロックの高さを統一してみてはいかがでしょうか。 但しheightの指定値は、文字サイズに比例するemやらexを使います。それによって完璧とは行きませんが、文字サイズの変更による崩れはかなり抑えられると思います。 これはabsoluteを使ったレイアウトでも同じです。 しかしem値やex値はブラウザによって解釈が違っているようで、空白部分が大きくなってマヌケなデザインになりかねません。 窮余の一策としては、ＩＥとそれ以外のブラウザによって指定値を変える方法があります。（知ってたらごめんなさい） div { width : 400px; _width : 420px; } という風にすると、ＩＥでは後で指定したアンダーバー付きの指定が有効となり幅420px、その他ではアンダーバー付きは解釈されず幅400pxとなります。 ちなみに記号はアンダーバー以外でもいいみたいです。 floatのいいところはブラウザの表示幅によって勝手に折り返してくれるので、表示幅に合わせた段組が可能となるところで、これはtableでは無理です。 最近作ったHPで、なんとかfloatで内容量の異なるブロックを段組みすることはできたのですが、商用サイトということで、表示の不安定さに限界を感じて最後はやむなくtableを使いました。残念！！
お礼
テンプレート部分ではほとんどのブラウザ、様々なディスプレイ環境でほぼ同一の表示にさせることが出来ました。まぁ、ここで『あとは簡単』と高を括っていたのがこの様です。 em等を使った幅・高さの指定も『文字数や、行数が予め決まっている場合』にしか使えませので、absolute配置の際、文字サイズに影響されたくない部分（メニュー等）に限って利用しています。コンテンツ部分に使用するとウインドウサイズでレイアウトが破綻する場合がありますから。SVGAなら数行使うところがSXGAだと1行で済んでしまったりしますので・・・ アンダーバーを使う方法は知りませんでした(汗)なんせ独学なもので・・・普段は『*』や『>』で子孫セレクタを指定する方法をとってました。 私も今での商用サイトはNetscape4.xを考慮し、全てTABLEでレイアウトしていました。CSSに移行するのはWeb屋の意地と言うか、自己満足だけと言うか・・・（笑）前回制作したものはテンプレートを非リキッドなCSSで、コンテンツ部分はTABLEレイアウトのサイトと自動生成用スクリプトを共用しているのでTABLEを使って・・・と普通の『ハイブリットデザイン』とは逆なことをしている気がしないでもないです（笑） TABLEという本来の意味とはかけ離れた物をレイアウトに使うのを止めると言うことは賛同できますが、CSSの為にデザインを制限されるのは納得いかないところです。結果として『TABLEっぽいレイアウトを強引にCSSで再現させる』状態になっていましてコードはDIVだらけです（笑）『CSS命』な方々からは怒られそうですが、『多くの間違った使い方が存在する』よりは『多くの無意味な物が存在する』方がいくらかマシかと思ってますので。
- steel_gray
- ベストアンサー率66% (1052/1578)
話題がずれますがabsoluteを利用しての配置について。 前回回答での利用の仕方においては先に挙げた制約以外はリキッドレイアウト、文字サイズ変更とも問題ないはずです。 回答どおりで positionはabsoluteにしますが、topやleft等の指定は不要です。（あえて書くならtop:0;left:0;になりますので。）
お礼
なるほど。左上基点でボックスを重ねるような状態ですね？教えて頂いたスタイルをコピペしただけですが、IEではレイアウトできませんでした。ですが、しっかり作りこめば大丈夫かもしれません。検討の余地有りですねありがとうございます。 ところで、position:relative;を含包ブロックに指定して基準ボックスとする場合、幅の指定が必須ではなかったでしょうか？リキッドレイアウトの為になるべく幅や高さを明示しないようにごまかしてきたのですが（笑） ブロック要素のwidth:100%;がTABLE要素のwidth="100%"と同じ解釈をしてくれればどんなにありがたいか・・・CSSに厳格なブラウザではレイアウトが破綻する場合がありますね・・・
- steel_gray
- ベストアンサー率66% (1052/1578)
「詳細度」の高い部分(*1)で2つ目のブロックに「clear:left」を指定してみては？ > 文章ではうまく表現できずわかりにくいかもしれません?が、 現状のコード(htmlとcss)を単純化したモデルを記述してもらえると、回答する方も検証できるかと。 *1:他のCSSがhead部に書かれているなら、インライン(style属性)で。
お礼
ご回答ありがとうございます。本日は帰宅してしまいましたので明日職場から単純化モデルを作成し掲載させていただきます。もしよろしければまた見てやってください。
補足
単純化モデルを作成してみました。 スタイル部分です。 #header{ margin: 0; padding: 0; background-color: #09F; } #main{ margin: 0; padding: 0; background-color: #CCC; } #menu{ float: left; width: 200px; margin: 0; padding: 0; background-color: #FC9; } #contents{ margin: 0 0 0 210px; padding: 0; background-color: #FFF; } .data{ margin: 0; padding: 0; background-color: #9C9; } .left_data{ float: left; width: 150px; margin: 0; padding: 0; background-color: #00F; } .right_data{ margin: 0 0 0 155px; padding: 0; background-color: #F00; } #footer{ clear: both; margin: 0; padding: 0; background-color: #F9C; } HTML部分です。 <div id="header">HEADER</div> <div id="main"> <div id="menu">MENU<br />menu-1<br />menu-2<br />menu-3</div> <div id="contents"> <div class="data"> <div class="left_data">DATA-1<br />DATA<br />DATA</div> <div class="right_data">DATA</div> </div> <div class="data"> <div class="left_data">DATA-2<br />DATA<br />DATA</div> <div class="right_data">DATA</div> </div> <div class="data"> <div class="left_data">DATA-3<br />DATA<br />DATA</div> <div class="right_data">DATA</div> </div> </div> </div> <div id="footer">FOTTER</div> もちろん実際にはもっと複雑ですが、この程度でも同じ状態になっています。普通に考えれば"data"クラスを適用した各DIV要素の後でclearしないとダメだと思うのですが・・・ "data"クラスを適用したDIV要素に『whidth:100%』を指定したり、擬似要素afterで空のブロック要素を生成、clearプロパティを適用してみましたが、Opera、Firefox、MacIEなどでは改善できませんでした。なにかお気づきの点があれば教えてください。
関連するQ&A
- 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
- floatさせたdivタグを折り返させたくない
Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ３の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- CSSの三段組みレイアウトについて教えて下さい。。
CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか？ CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び？！ CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか？
- 締切済み
- CSS
- 3カラムのレイアウト、及びdivの入れ子等
初めまして。 とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。 どうぞ宜しくお願い致します。 下記のように、3カラムの段組みレイアウトを行いました。 左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、 中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。 ＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、 【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。 ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。 と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？ 可能な限りシンプルに、 正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？ （ひとつひとつの画像をdivの中に入れたり、 横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造） は避けたいと思っておりましたが、 もしかして、それがいちばん正しいのでしょうか…？ ご存じの方、どうぞご指南の程宜しくお願い致します！ 散文、失礼いたしました！
- ベストアンサー
- HTML
- float の clear
CSS によるレイアウトを試しています。 float を中断したいときにはその次の要素で clear=left|right する、というのは理解したのですが、この clear, 要素のネストを無視するのでしょうか。 たとえば次のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>File Browser</title> <style type="text/css"> <!-- #leftside { background-color: #66FF00; float: left; width: 120px; height: 120px; } #rightside { background-color: #33CC99; margin-left: 120px; } #navlink .boxrow { float: left; height: 30px; width: 120px; background-color: #CC9999; margin: 5px; } #content { background-color: #CCFF99; height: 300px; clear: left; } --> </style> </head> <body> <div id="leftside"> </div> <div id="rightside"> <div id="navlink"> <div class="boxrow"></div> <div class="boxrow"></div> <div class="boxrow"></div> </div> <div id="content"> </div> </div> </body> </html> （rightside の要素の中なので）content の clear により navlink の直下に配置されて欲しいのですが、leftside の float まで clear してしまっているようです。 親の要素の中だけで clear することはできないのでしょうか？
- ベストアンサー
- HTML
- IE8でサイドバーのレイアウトが崩れる場合の対処法
CSSについての質問です。 IE8よりも古いバージョンでのみレイアウトが崩れて困っています。 簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。 [HTML] ---------------- <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> </div> ---------------- [CSS] ---------------- #main{ float:left; width:620px; } #sidebar{ float:right; width:300px; } #footer{ clear:both; } ---------------- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。 しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 ---------------- <div id="main"> <div id="sidebar"> </div> </div> ---------------- なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。 どうにか解決する方法はありませんでしょうか？ 文章だと伝わりくいかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- CSS
- cssのfloatについて
cssのfloatを使い横並びを実現していますがoverflowを利用して横並びを実現するという方法を聞きました。 現状の構成は具体的に以下のような感じです。 <div id="main"> <div id="left">レフト</div> <div id="center">センター</div> </div> #main:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } #left {float: left;} #center { float: right} これをoverflowで実現するにはどうすればいいのでしょうか？ また、floatを使用しないで実現するメリットはなんでしょうか？
- ベストアンサー
- HTML
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- CSSで「float: left;」の次にフッタをうまく表示させるには？
http://okwave.jp/qa5450892.html にて、CSSの段組に関する疑問が無事に解決されました。 が、実はもう一つ、新たに表示に際して困ったことが起きています。 現在のデザインは、<div id="menu">の右側に<div id="contents">を表示させるようになっておりまして、メニューブロック及びコンテンツブロックは、コンテンツブロックの表示法をもう少し改良するくらいで大丈夫な段階まできました。 さて。 このページに、新たにフッタを追加したいと考え、<div id="contents">の下に、幅100%のフッタを、<div id="head">のような感じでつけてみたいと考えているのですが、実際にそのようにしてみようとしたところ、 <div id="contents">のさらに右側にfooterが表示されるようになります。 この状態を、コンテンツブロックそのものに<br>が入るような感じでフッタを表示させようとする場合、スタイルシートでは、どのように記せばいいのでしょうか。 もちろん、フッタを排除してヘッダ部分にいろいろと書いておくのが簡単な方法ではあるのですが。 ご指導、よろしくお願いします。
- 締切済み
- HTML
- perlで3カラムにしたい (css)
perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。 どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。 ｍ（＿ ＿）ｍ 当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。 よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定（755px）でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>
- ベストアンサー
- CSS
お礼
度々ありがとうございます。 >floatよるレイアウトの限界だと思います。 floatによる2段組レイアウトを利用した場合、『段組内で同方向へのfloatは2度と使えない』ということでしょうか・・・ >absoluteを利用して配置 ブロックの高さは不確定です・・・何より、absoluteによる配置だと、リキッドレイアウトはもちろん不可能ですが、ユーザー側でフォントサイズを変えられたときにレイアウトが破綻しますので、画像などを使用して高さや幅が確定されている部分でしか使用していません。 floatによる段組はCSSの作例で必ず紹介されるほどポピュラーなものですが、ネストした物を見たことがありませんでした・・・やはりCSSによるレイアウトの限界でしょうか・・・残念ですがCSSの限界がこんなに低い所にあるとは思いもよりませんでした・・・と言うより、リキッドレイアウトをCSSで実現させようとしたのが間違いだったのでしょうか・・・CSSに不可能な部分はTABLEで代用する他ありません・・・ なんか最後は愚痴っぽくなってしまいましたが、ありがとうございました。