• 締切済み

スタイルシート float

スタイルシートを使って左右分割のページを作ろうと思っています。 #left{ width:170px; float:left; } #right{ float:right; } としたところ、 ブラウザ(IEです)を余裕を持たせているときは正常表示されますが、 左画面 | 右画面 ウインドウ幅を狭くすると、 右側にくる部分が、画面上に、 左側にくる部分が、画面下に、 右画面 -------- 左画面 上下に分割された画面となってしまいます。 これを、ウインドウ幅を狭くしても 左右分割に保つようにするにはどうしたら良いのでしょうか?

  • HTML
  • 回答数2
  • ありがとう数3

みんなの回答

noname#31047
noname#31047
回答No.2

CSS Sample: #left{ width:170px; position:absolute; } #right{ padding-left:170px; }

-Jelly-
質問者

お礼

その通りにしましたが、あまりかわりませんでした。     右画面     右画面     右画面 ------- 左画面 左画面 左画面 という感じになってしまいます。 #left{ width:170px; position:absolute; } #right{ padding-left:170px; position:absolute; } としたらうまくいきました。 どうもありがとうございました。

  • is_may
  • ベストアンサー率65% (58/89)
回答No.1

スタイルシートに #wrap { width:700px; } を追加し、二つのボックスを囲めばずれなくなります。 ↑の横幅は必要に応じて調節してください。 <div id="wrap"> <div id="left">メニュー</div> <div id="right">本文</div> </div>

-Jelly-
質問者

お礼

widthを指定してしまうという手もあるんですね。 そうすると、ウインドウ幅を定めた幅より小さくしたときに 画面全体が表示されませんよね?? できることなら伸縮する? もし見てくれる人がいたなら、 その人が好きな幅でブラウザを開いて欲しいです。 どうもありがとうございました。

関連するQ&A

  • スタイルシートを使って段組でのバディングは?

    書籍にのっていたスタイルシートでの段組を 次のように記述してみました。 <DIV style="float:left;border-right:3px dashed #000000;width:50%;padding-left:10px;"> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV><DIV style="padding-left:10px">  ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV> 中央に点線が入って文章が左右に分けられるのですが、 文字と中央線の余白がないので、paddingやmarginを使って みたのですが、特に右側文章の左にある点線と文字の空間がどうしてもできません。(左側部分のの左右余白は機能するのですが) tableを使ったときはpadding-leftで設定できたのですが、正しい方法がありましたらお教えください。 書籍にもここらへんの説明がないのです。

  • width100%とfloat

    左右分割サイトで ・左側メニューは160px(#menu) ・右は残りすべて(#main) というものを作りたいのです。 #menu {width:160x;float:left;} にすると、#menuは左寄せになりますが #mainは右側に寄ってくれません(width属性を指定していないから)。 tableレイアウトを使用せずにこのようなことができますか? 条件は ・HTML 4.01 Strict ・tabelを使用しないレイアウト ・フレーム使用なし です。 お願いします!

    • ベストアンサー
    • 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の間隔について質問です

    ボックスでボックスを回り込みしています。(?) …書いたほうが早いですね… HTMLが <div id="left"> 左ボックス </div> <div id="right"> 右ボックス </div> CSSが *{ margin: 0px; padding: 0px; } #left { float: left; width: 100px; height: 100px; } #right{ width: 200px; height: 100px; } といった感じです。 左ボックスと右ボックスの間に1~2pxほどの間隔があいてしまいます。 これをなくすにはどうすればいいですか? お願いします。

  • コーディングで「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のどちらに、どのようなタグを 追加して回り込みをなくしたらよろしいでしょうか? 分かりにくいかもしれませんがご教授いただければ幸いです。

  • 3カラム IE 右落ち

    現在幅固定3カラムでサイトを作っているのですが、私のマック環境(safari&Firefox)ではちゃんとレイアウトが整うのにwindowsのIE 7,6,5ではどれも右のボックスが左下に落ちてしまいます。 CSSはもともと #container { margin:0px auto; width:1000px; text-align:left; } .wrapper { width:800px; float:left; } /* 左 */ .left { float: right; width:200px; } /* 中央 */ .main { float: right; width:600px; } /* 右 */ .right { float: left; width:200px; } /* フッター */ .footer { width:100%; clear:left; } で、これに左右にmargin-left:15px;などを入れていたので、それが原因かと思いdisplay: inline;を足してみたり外してみたのですが変わらず、 左右のボックスの中に<div></div>で囲ったフレーム素材の中にカテゴリーなどをいれているので、そこにmarginやpaddingが発生しているので今度は上記のwidthをちょっと変えてみました。 現在wrapperは780px 左190px 中央580px、右181pxとしてかなり右に余裕を持たせて、尚かつ右で使用していたフレーム素材を全て取り外し1行文字のみだけで試してみたのですが、全然右に上がってきてくれません。 またwidthに余裕を持たせてborderを使ってそれぞれの位置を確認したのですが、右にはかなりのスペースがあいているのに、右に上がってきてくれないのです。 一体何がいけないのでしょうか?? どうかお力をお貸しください。宜しくお願い致します。

  • スタイルシートで上手く段組が出来ません。

    スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか? よろしくお願いしますm(_ _)m

  • 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
  • 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」を2つ使用して左右の画面を表示した場合、通常は左右に分かれるのですが、右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。 これを現象を防ぐ方法はありませんか? 全体の横幅を固定すればできるんでしょうが、可変長の場合にうまくいきません。

  • 3カラムのサイトでfloatができない

    3カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【HTML】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム     </div><!--div id 560 END--> <div id="175"><!--div id 175 START-->     右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START-->     左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【CSS】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 (ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます) アドバイスいただければ嬉しいです。 よろしくお願い致します。

    • ベストアンサー
    • CSS

専門家に質問してみよう