- 締切済み
IEだとdivが横に並びません
CSSでレイアウトをしているのですが、横にふたつdivを並べたいのに、右側のdivが下にまわってしまいます。 http://oshiete1.goo.ne.jp/qa3576983.html こちらでIEでは左の余白が倍になってしまうと知り、display:inlineを指定しましたが、解決しません。 何が原因でしょうか。 HTML: <div id="main"> <div id="mainl"> </div> <div id="mainr"> </div> </div> CSS: #main { width: 900px; } #mainl { float: left; height: 317px; width: 324px; display: inline; padding-top: 26px; padding-right: 16px; padding-bottom: 0px; padding-left: 40px; } #mainr { float: right; height: 317px; width: 480px; padding-top: 26px; padding-right: 40px; }
- ceina
- お礼率80% (94/117)
- CSS
- 回答数3
- ありがとう数12
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- font_color
- ベストアンサー率45% (24/53)
ソースを見る限り問題ないと思います。 paddingを細かく指定されているので少し疑問に思ったのですが、子要素（#mainl・#mainr内）に指定幅を超える要素が含まれていませんか？ たとえば#mainl内に入れる要素としては、 「width:324px;」-「padding-right:16px;」-「padding-left: 40px;」=268px以下の幅 となります。一度確認されてはいかがでしょうか。
- nori_007
- ベストアンサー率35% (369/1048)
検証してみました。 以下のソースをエディタに貼付けて確認してみてください。 一部、修正しています。 -- 検証ソース -- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>goo</title> <style type="text/css"> <!-- #main { width: 900px; height: 500px;/*検証用に追加*/ background-color: #FFE;/*検証用に追加*/ border: solid 1px #F00;/*検証用に追加*/ } #mainl { float: left; height: 317px; width: 324px; /*display: inline;*//*検証用に削除*/ padding-top: 26px; padding-right: 16px; padding-bottom: 0px; padding-left: 40px; background-color: #FFC;/*検証用に追加*/ } #mainr { float: right; height: 317px; width: 480px; padding-top: 26px; padding-right: 40px; background-color: #FFB;/*検証用に追加*/ } --> </style> </head> <body> <div id="main"> <div id="mainl"> <p>左スペース</p> </div> <div id="mainr"> <p>右スペース</p> </div> </div> </body> </html> -- 検証ソース -- display: inline; は不要です。 質問の際は単にソースを示すだけでなく、上記のようにソース１式示して頂いた方が、問題点が判るかも知れません。 また、少し前の質問を検索される事をお勧めします。 後は、DOCTYPEスイッチを意識してみてください。その際に IE6 にはバグも有るので、合わせて調べてみてください。
お礼
お礼が遅くなりすみません。divサイズがオーバーしているという初歩的なミスでした。ご丁寧に検証までしていただき、ほんとうに助かりました。DOCTYPEスイッチとはなんなのでしょうか・・・。まだまだ勉強不足だと痛感しています。ご回答ありがとうございました。
ここのソース内で問題はないと思います。 divの中のほうに問題があるのかもしれません。
お礼
お礼が遅くなりすみません。divサイズがオーバーしているという初歩的なミスでした。ご回答ありがとうございました。
関連するQ&A
- 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
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
- div入れ子、親でmarginを設定すると子のmarginは反映されない？
段組みレイアウトでdivが 入れ子になってています。 外側が <div id=wrap> <div id=main> <div id=form> </div> </div> </div> #wrap{ width: 840px; margin-top: 0px; margin-right: auto; margin-bottom: 15px; margin-left: auto; } #main { width: 582px; float: right; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 10; } #form { width: 562px; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 20; } としてあります。 id=formのmargin-left :20; だけがブラウザで反映されず、 flort:right;で右に寄せて左に20pxあけました。 id=mainもflort:right;で右に寄っているだけだったようです。 divを入れ子に使う場合、 親でmarginを設定したら、子のmarginは反映されないのでしょうか？
- ベストアンサー
- HTML
- CSSでの横位置指定：IE6の表示について
初心者です。宜しくお願い致します。 テーブルを使わず、画像の下にテキストが入った2つのboxを、中央に表示させたいのですが、IE6だけうまくいきません。 ソースは以下です。 ■HTML ---------------------------------- <div id="list"> <div class="list_top"> <div class="list_title">タイトル</div> </div> <div class="list_cont"> <div class="list_photo"> <img src="g"width="130" height="150" border="0" /></a> <a href="">ＡＡＡＡＡＡＡＡ</a> </div> <div class="list_photo"> <img src="g"width="130" height="150" border="0" /></a> <a href="">ＡＡＡＡＡＡＡＡ</a> </div> </div> </div> ■CSS ---------------------------------- #list { FLOAT: right; MARGIN: 5px 4px 5px 6px; WIDTH: 315px; HEIGHT: 300px; BORDER: #000000 1px solid; } .list_top { PADDING-RIGHT: 0px; PADDING-LEFT: 5px; BACKGROUND: url() left top; PADDING-BOTTOM: 0px; PADDING-TOP: 9px; HEIGHT: 24px; } .list_cont { padding:0px 0px 0px 25px; BACKGROUND: url() left top; } .list_photo { FLOAT: left; MARGIN: 7px; WIDTH: 130px; } 以上です。 CSS側の 【.list_cont { padding:0px 0px 0px 25px;】 上記の指定で、Firefoxと、IE7では中央に表示できるのですが、 IE6のみずれてしまいます。 長くなり申し訳ありません。宜しくお願い申し上げます。
- ベストアンサー
- HTML
- IE6のみレイアウトがずれる。
IE6のみレイアウトがずれる。 CSSで下記のように指定しています。 現状のブラウザであればレイアウトが崩れないのですが IE6で見るとレイアウトが崩れるのです。 #my_navi #my_contentsL #my_contentsR の三つが横一列に並ばせたいのですが ● ←#my_navi ● ←#my_contentsL ● ←#my_contentsR の様にレイアウトが崩れてしまいます。 何か解決方法が有りますでしょうか? 宜しくお願い致します。 ↓CSSの記述 body { width : 100% ; float: center; display: inline; } #my_body { margin: 0 auto; width : 950px ; } #my_main { width : 950px ; } #my_header { width : 950px ; height: 100%; } #my_headerT { float : left ; width : 950px ; } #my_headerL { float : left ; width : 750px ; height: 260px; } #my_headerR { float : right ; width : 200px ; height: 260px; } #my_navi { float : left ; width : 190px ; display: inline; } #my_contents { float : right ; width : 750px ; display: inline; } #my_contentsL { float : left ; width : 550px ; display: inline; } #my_contentsR { float : left ; width : 190px ; display: inline; } #my_contentsF { float : left ; width : 750px ; display: inline; }
- ベストアンサー
- ブログ
- divの入れ子が上手くいきません。
.line { background-image: url(../img/line.gif); background-repeat: no-repeat; background-position: left bottom; display: block; padding: 0px; clear: both; width: 600px; height:auto; margin: 0px; } .left{ width:210px; height:90px; float:left; text-align:center; padding:10px 5px 10px 0px;} .right{ width:360px; height:90px; float:left; padding:10px;} <div class="line"> <div class="left">あああ</div> <div class="right">いいい</div> </div> 上記のようにlineでleftとrightを内包したいのですが、IEでは表示されるのですが、fox・safariで確認すると画像が消えてしまいます。 どうもdivで括っているせいかline内に文字が入っていないと認識されているようで、ためしに適当な数字を入れてやると認識されました。 また、lineのheightをpx指定してやると表示されるのですが、lineは使いまわしたいクラスなので、縦を固定することができません。 どうしたら解決しますか？
- ベストアンサー
- HTML
- CSS-paddingが反映されません
入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。 ご教授ください。
- 締切済み
- HTML
- 外側のdivの高さを入れ子のdivの高さに自動的に合わせたい
外側のdivの高さを入れ子のdivの高さに自動的に合わせたい 添付画像のようなコンテンツを作成しています。 外側のdiv(contents_box）内にcontents_imgとcontents_textのdivを配置しています。 このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう？ 高さをautoですとただの棒のようになってしまい、ダメでした。 どうぞよろしくお願い致します。 xhtml <div id="contents_box"> <div id="contents_img">ここに画像</div> <div id="contents_text"> ここにテキスト</div> </div> css #contents_box { height: auto; width: 805px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #333; } #contents_img { height: auto; width: 300px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; float: left; } #contents_text { height: auto; width: 485px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; float: right; text-align: justify; }
- ベストアンサー
- HTML
- IEでだけ1つのDivがずれる。
現在スタイルシートを使ってレイアウトをしているのですが、 なぜかIEだけ一部のDIVのセンタリングがうまくいきません。 ヘッダー、メニューは共に中央揃えなのですが、その下のメインDIVのみ 10pxくらいだけ左側にずれます。Firefoxではきちんと揃って表示されています。 色々試したのですがどうしても解決方がわかりません。よろしくお願いします。 css body{ text-align: center; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding: 0px; } #header{ display: box; margin: 0px; padding: 10px 0px 15px 0px; background-image: url(header.gif); background-repeat: repeat-x; background-position: center bottom; } #header div{ width: 780px; display: box; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding:0px; } #menu { clear: both; margin: 0px; padding: 0px; background-image: url(menu-bg.gif); background-repeat: repeat-x; height: 50px; } .main{ clear: both; margin: 0px auto 0px auto; padding:0px; text-align: left; width: 780px; bottom: 0px; } #menu ul{ width: 780px; margin: 0px auto 0px auto; padding: 0px; height: 50px; overflow: hidden; } ヘッダー、メニュー共に、背景画像を画面いっぱい横並びにしたいため その内の要素のみをセンターに寄せる形にしています。 htmlでは上記のdiv(ヘッダー・メニュー・メイン)を縦に三つ並べています。
- ベストアンサー
- HTML
- div枠のレイアウトが崩れてしまいます
２×２段の枠を作るために、下のような段組にしました。 100％表示ではうまく表示するのですが、ウィンドウを縮小すると、 div要素が勝手に改行してしまい、レイアウトが崩れてしまいます。 同じような質問を参考にして、"wrap"の幅設定をしてみたり、 div要素に｛position:relative;}を追加してみたりしましたが、 どれもうまくいかず、縮小でレイアウトが崩れます。 ウィンドウを縮小してもレイアウトが崩れないようにする方法はあるでしょうか？ それと、もう１つ質問があります。 右上の枠内の画像を「枠内の右下」に表示したいのですが、よい方法はありますか？ {text-align:right;}で横位置は移動できたのですが、縦位置がうまく設定できません。 画像自体に｛potision:absolute;}{top:**}{left:**｝で指定すると、 またウィンドウの倍率変更でとんでもないところに表示されてしまいます。 【html】 <body> <div id="wrap"> <img src="image/title.gif"> <div id="left-up">あああ</div> <div id="right-up"><img src="logo.jpg"></div> <br class="clear"> <div id="left-down">いいい</div> <div id="right-down">ううう</div> </div> <!-- /wrap--> </body> 【css】 #wrap{ width: 945px; height: 700px; padding: 0px; border: 1px #202020 solid; margin: 0 auto; text-align: left; } #left-up{ width: 160px; height: 80px; border-top: 1px solid #606060; border-right: 1px solid #606060; float: left; } #right-up{ width: 780px; height: 80px; border-top: 1px solid #606060; float: left; } .clear{ clear: left; } #left-down{ width: 160px; height: 500px; border-top: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } #right-down{ width: 780px; height: 500px; border-top: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } よろしくお願いいたします。 そもそも、この枠組みの仕方が無謀であれば、何かよい方法を教えていただけないでしょうか。 重ね重ね申し訳ありません。
- ベストアンサー
- HTML
お礼
お礼が遅くなりすみません。おっしゃるとおりでした。初歩的なミスで恥ずかしい限りです。どうもありがとうございました。