- ベストアンサー
floatを使うと隙間ができる
- floatを使用すると、左サイドバーとメインコンテンツの間に隙間ができます。この隙間を埋めるためには、コンテンツの幅を調整する必要があります。
- さらに問題なのは、Google Chromeで見ると、左サイドバーとメインコンテンツの高さが揃わず、左サイドバーが下にずれて上部との間に隙間ができます。marginを0に設定したり、heightを指定しても、隙間は消えません。
- この問題を解決するための改善方法はいくつかあります。例えば、flexboxを使用してコンテンツをレイアウトする方法や、グリッドシステムを導入する方法などがあります。具体的な実装方法については、詳細なコードやCSSの設定が必要ですが、これらの方法を試してみることをおすすめします。
- みんなの回答 (5)
- 専門家の回答
関連する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」を2つ使用して左右の画面を表示した場合、通常は左右に分かれるのですが、右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。 これを現象を防ぐ方法はありませんか? 全体の横幅を固定すればできるんでしょうが、可変長の場合にうまくいきません。
- 締切済み
- HTML
- 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
- 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
- 3カラムレイアウトで隙間
下記のように3カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> <div id="left">左メニュー</div> <div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間(↓の部分)に3pxほどの隙間があいてしまいます ↓ ↓ [左] [中央] [右] 隙間なくぴったりつけるにはどうすればいいでしょうか。 どうぞよろしくおねがいいたします。
- ベストアンサー
- HTML
- 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:floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか? サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- CSSでfloat指定した画像に隙間
floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px)を放り込んでいます。 (幅400pxの入れ物に200pxの小箱を2列に並べていく) 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left; ←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>
- ベストアンサー
- HTML
- カラムで段組と段組の間に隙間が埋ができる
カラムで段組と段組の間に隙間ができてしまい無くせません。 menuとtop,accsentなどの間に隙間ができてしまいます。 助けてください。 style.css /*html ボディー*/ html{height:100%; overflow:hidden;} body{ margin:0px;height:100%; width: 100%; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive;} .cur{font-family:cursive;} .ser{font-family:serif;} /*フレーム スタイル*/ div#menu{float:left; width:100px; height:100%; background-color:#666633;} div#top{height:10%; width:; background-color:#ff9933;} div#accent{height:3%; width:; background-color:#999933;} div#navi{height:6%; wsidth:; background-color:#ff9933;} div#main{margin-left:100px; height:; width:; background-color:#ffff99;} div#base{position:relative; width:100%; height:91%; background-color:#ffff99;} div#bottom{clera:both; height:9%; width:100%; background-color:#999933; } HTMLのほうは <HTML> <HEAD> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <TITLE></TITLE> </HEAD> <BODY> <div id="base"> <div id="menu"> menu </div> <div id="top"> top </div> <div id="accent"> accent </div> <div id="navi"> navi </div> <div id="main"> main </div> </div> <div id="bottom"> bottom </div> </BODY> </HTML> このような感じになります お願いします。
- ベストアンサー
- HTML
- 回り込み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ほどの間隔があいてしまいます。 これをなくすにはどうすればいいですか? お願いします。
- 締切済み
- その他(インターネット・Webサービス)
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"(下記ソース)がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #b{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 144px; height : 240px; float : left; display : inline; } #c{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
お礼
tkmojoさん 仰る通りです。 情報を隠していたわけでなく、 構文は実際はもっと複雑で、焦点を絞って書いたつもりが、 不足もあって、かえって伝わらないものになってしまいました。 仰る通り、構文自体は問題はありませんでした。 全角で空白ができてるという初歩的なミスでした。 お手数かけて申し訳ありません。