- ベストアンサー
width100%とfloat
- みんなの回答 （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>
関連するQ&A
- 並んだ２つのfloatボックス、片方を固定位置にしたい
floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為） ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }
- ベストアンサー
- CSS
- floatについて
IEだといいんですが、MacのIE5.17,OS9.2で表示がおかしくなってしまいます。 <div id="container"> <div id="nav">・・・</div> <div id="main">・・・</div> </div> で、 #container {width:760px;} #nav {width:160px;float:left;} #main{width:580px;float:right;} とすると、div#mainが「改行されて」右寄せになります。「改行なし」で右寄せにするにはどうしたらいいのでしょうか？ #navと#mainは、合計740pxで#containerに余裕を持たせてるんですが…
- 締切済み
- HTML
- floatを使用すると中央寄せにならない
CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？
- ベストアンサー
- CSS
- CSSでfloatがうまくいきません。
CSSでfloatがうまくいきません。 .main{ width: 1000px; } .wrap{ width: 900px; height: 120px; margin-left: 50px; background-color: #ffffff; overflow:auto; } .head_l { width: 300px; height: 120px; float: left; } .head_r { width: 600px; height: 120px; float: left; } <div class="main"> <div class="wrap"> <div class="head_l">ロゴ画像</div> <div class="head_r">項目</div> </div> </div> mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか？
- ベストアンサー
- HTML
- コーディングで「float」のclearの仕方
htmlとcssのコーディングに関して質問させてください。 右側と左側にボックスをフロートさせた際、 どうやって回り込みを解除したらよいのか教えてください。 ▼htmlのタグ <div id="left">......</div> <div id="right">......</div> ▼cssのタグ #left{float:left; width:100px;} #right{float:right; width:100px;} このようなコーディングをした際には、 html、もしくはcssのどちらに、どのようなタグを 追加して回り込みをなくしたらよろしいでしょうか？ 分かりにくいかもしれませんがご教授いただければ幸いです。
- 締切済み
- その他([技術者向] コンピューター)
- floatについて
■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか？ <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>
- ベストアンサー
- HTML
- CSSレイアウトの本当の正しいやり方
CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。 表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。 #wrap { width: 700px; margin: 0 auto; text-align: left; } #header { color: #fff; } #menu { width: 160px; float: left; } #main { margin-left: 160px; padding: 10px; } #footer { clear: both; padding: 10px; }
- ベストアンサー
- HTML
- CSSでブラウザごとにレイアウトが崩れたりします。
はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■ ■＝ヘッダー □□●●●● □＝メニュー □□●●●● ●＝コンテンツ（中身）1 □□○○○○ ○＝コンテンツ（中身）2 □□○○○○ ▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- floatを使ったデザインについて
CSSで、左側にメニュー・右側にメイン記事、という 設定にしたいのですが(ブログではありません)、うまく行きません。 以下の状態で、IE6.0では思い通りに左右に分かれてくれるのですが、 FireFoxの場合に 右カラムの.midashiで指定したグリーンの背景色が、左カラムの左端から始まってしまい、 文字は.midashi、.text共々「画像に回り込むテキスト」のように 左のメニューが終わったところで左カラムの左端から始まります。 #right_textに、margin-right:0px;、margin-left:auto;と付け加えると FireFoxでも予定通り、左右がキレイに分かれてくれるのですが 本来、こうするものなのでしょうか？ ブログのカスタマイズもしたことがあるのですが、 http://allabout.co.jp/internet/hpcreate/closeup/CU20050228A/index3.htm この通りなら、こんな風にしなくても大丈夫ですよね？ いつもテキストエディタで入力しているので 素人ながらに色々とチェックはしたのですが(スペルミス・ブラウザ間のpadding合わせなど) 基本的なことが間違っていないか、御教授ください。 ［HTMLソース］ <div id="frame"> <div id="left_text"> (中略) </div> <div id="right_text"> <div class="midashi"> らりるれろ </div> <div class="text"> ああああああ<br> いいいいいい<br> </div> </div> </div> ［CSSソース］ #frame { width : 660px; background-color : #F0F0F0; } #left_text { width : 150px; float: left; padding-left: 10px; padding-right : 10px; } (#left_text内の細かい部分は省略) #right_text { width : 470px; padding-left: 10px; padding-right : 10px; } .midashi { font-size:20px; background-color: #b3c716; width : 470px; } .text { line-height: 170%; font-size: 15px; width : 470px; }
- ベストアンサー
- CSS
- floatの使い方
すごく初歩的な質問をさせて下さい。 DW5.5を使用しております。 「contents」というdivの中に「main_1」と「main_2」というdivを入れたいのですが、 floatを使用するとcontentsの下側に回ってしまいます。 「main_1」を左寄せに、「main_2」を右寄せにして「contents」内にはめるには どのようにすればよいのでしょうか？ どなたかご教授下さい。 ＜＜ソース＞＞ <body> <div id="contents"> <div class="main_1"> </div> <div class="main_2"> </div> </div> </body> ＜＜css＞＞ *{ margin:0px; padding:0px; } img{ border:none; } li{ list-style-type:none; } body{ font-size:12px; line-height:1.4em; font-family:"ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; background-color: #333333; margin:0px auto; } /* FireFox リンク選択時の点線を消す */ a{ overflow:hidden; outline:none; } /* FireFox flashの境界の点線を消す */ object{ outline:none; } #contents{ width: 940px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background: #000 url(../img/con_main.png) repeat-y; padding-top: 42px; padding-left: 60px; } .main_1{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-left: 40px; width: 550px; float: left; height: 500px; } .main_2{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; float: right; width: 296px; padding-right: 30px; height: 500px; }
- ベストアンサー
- ホームページ作成ソフト
