つい集めてしまうものはなんですか？

float を使うと隙間ができる

解決済

  • 質問者：kurobon619
  • 質問日時：
  • 回答数：5件

左サイドバーのサイトを構築するのですが、
float を使うとmain とleft の間に隙間ができます。
margin=0にしても隙間ができます。この隙間を埋めるにはcontent
の幅をぴったり合わさったサイズにするしかないのでしょうか？

それともっと深刻なのは、グーグルクロムでみると
leftとmain の高さが揃わず、leftが下がって上部との間に
隙間ができます。margin=0　にしても、heightを指定しても
まったく隙間は消えません。
<div id="content">

<div id="main">


</div>


<div id="left">


</div>

良い改善方法を教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.3ベストアンサー

  • 回答者： tkmojo
  • 回答日時：

私が不可解に思うのはなぜ情報を全て出さないのか、です。


htmlに<div id="header">が無いのに急にcssでは出てくるし…
さらに、下記のものをそのまんま組んでみましたか？

<div id="header">
</div>
<div id="content">
<div id="main">
</div>
<div id="left">
</div>
</div>

#header { position: relative; width: 100%; height: 160px; }
#content { width: 950px; height: auto; margin-right: auto; margin-left: auto;
padding-right: 6px; }
#main { width: 700px; height: 1020px; float: right; }
#left { text-align: center; width:230px; float: left; height: 1020px; margin-right: 0px; margin-bottom: 5px; margin-top: 0px; }

少ない情報で回答が必要なら、まず削った情報分だけでもご自身でブラウザで確認してください。
今回の件で言いますと、全く問題は起きていません。
全てのボックスにbackground-colorを指定して確認してみればどういう状態かわかるでしょう。
#headerと#left及び#mainは密着しています。
heightは隙間には関係ありません。

縦に意図しない隙間が空く、と言うのなら質問者様が情報を出していない部分に原因があります。
回答者もエスパーじゃないので、情報が無くては回答のしようがありません。

#mainと#leftの間に隙間が空く、という事については
950pxのボックスの中で230pxを左寄せ、700pxを右寄せにしているのですから、#leftと#mainの間に20pxの間隔が空くのは当然です。
#leftと#mainを密着させたいのなら、その20pxは一体どこへやりたいのでしょう？

本当に解決させたいのなら、情報を全て出した上で何が意図しない挙動なのか、意図しない隙間は何ピクセルなのか、目的としてはどうしたいのか、こういう事を全て書く事をお勧めします。
スクリーンショットを添付するとよりわかりやすくなります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

tkmojoさん　仰る通りです。

情報を隠していたわけでなく、
構文は実際はもっと複雑で、焦点を絞って書いたつもりが、
不足もあって、かえって伝わらないものになってしまいました。

仰る通り、構文自体は問題はありませんでした。

全角で空白ができてるという初歩的なミスでした。

お手数かけて申し訳ありません。

通報する
お礼日時：2014/07/04 13:52

No.5

  • 回答者： ORUKA1951
  • 回答日時：

せっかくHTML5も書いたので追加して置きます。


　質問タイトルは{floatを使うと・・・}になっていますが、このような段組に
はfloatを使わないほうが良いです。
・主要でない要素を先に書く必要がある。
・段内でfloatが使えない
・marginなどの指定が厄介
　先のサンプルをHTML5にしてみました。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造
を付加するため(
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
)』に使用してありますから、そのままHTML5に直せたのです。leftのような文書
構造に関係ないclass名は使わない。左じゃなく右や下に配置しようとしたとき
混乱する。
★HTML5の新しい要素(
http://standards.mitsue.co.jp/resources/w3c/TR/h … )

★改善点
　スマホ縦置きのような狭い画面460px以下では、デザインが変わります。ウィ
ンド幅を縮めてみてください。

★HTMLもスタイルシートも、とっても簡単で分かりやすいと思います。数年後に
手を入れたくなっても楽でしょう。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<!--[if IE]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5. …
<script
src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->
＿<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
header,section,footer{width:90%;min-width:460px;max-width:880px;margin:0
auto;padding:0;}
section{position:relative;min-height:460px;}
section h2,section p{margin:0 150px 0 0;}
section section{width:auto;min-width:0;min-height:0;margin:5px 150px 0 0;}
section section p{margin:0;min-height:0;}
section nav{position:absolute;width:150px;top:0;height:100%;right:0;}
/* 色づけ */
body{background-color:gray;}
header{background-color:aqua;}
section{background-color:white;}
section section{background-color:silver;}
section nav{background-color:fuchsia;}
footer{background-color:orange;}
@media screen and (max-width:460px){
header,section,footer{min-width:200px;}
section{position:relative;min-height:0;}
section h2,section p{margin:0;}
section section{margin:0;}
section nav{position:static;width:100%;height:auto;right:auto;}
}
-->
＿</style>
</head>
<body>
＿<header>
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</header>
＿<section>
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<section>
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿＿<p>HTML4.01でclass名が文書構造を示す物にしてあるため、HTML5にする
ときはそのまま&lt;div class="header"&gt;&lt;/div&gt;は&lt;header&gt;&lt;
/header&gt;とすれば良いです。</p>
＿＿</section>
＿＿<nav id="contentTable">
＿＿＿<h3>目次</h3>
＿＿</nav>
＿＿<section>
＿＿＿<h3>チェックすべきこと</h3>
＿＿＿<ol>
＿＿＿＿<li>DTDはstrictであるか</li>
＿＿＿＿<li>DOCTYPEは標準モードで動作するよう適切に書かれているか</li>
＿＿＿</ol>
＿＿＿<p>
＿＿＿＿基本的にこれだけを守っておけば、現行のブラウザでの差は出ないはず
です。
＿＿＿</p>
＿＿</section>
＿＿<nav id="contentTable">
＿＿＿<h3>目次</h3>
＿＿</nav>
＿</section>
＿<footer>
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistory">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2014-07-02</dd>
＿＿</dl>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： ORUKA1951
  • 回答日時：

まず、


下記サンプルを確認してください。
★Ctrl+＋やCtrl+－で文字サイズを拡大しても縮小しても、ウィンドウ幅をスマホ程度から、超幅広ディスプレイにしても、IE7以降ならどのブラウザでもきちんと配置されるはずです。Ie6では、ナビが一杯にならない。IE5ではセンターに寄らないくらいで使用に問題はありませんね。
★印刷や携帯電話には素のブラウザのもつスタイルで印刷表示されます。
★leftをrightに、marginの値を変更すれば左だろうが右だろうが自在に。もちろん下にしてもよい。
★float使ってないので本文内でfloat,clearが使えます。
★HTMLもスタイルシートも簡単でメンテナンスも簡単なはず。
　見よう見まねではなく、ちゃんと基礎から身につけたほうが早いですよ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:400px;max-width:880px;margin:0 auto;padding:10px;}
div.section{position:relative;min-height:300px;}
div.section h2,div.section p{margin:0 0 0 160px;}
div.section div.section{width:auto;min-width:0;min-height:0;margin:5px 0 0 160px;}
div.section div.section p{margin:0;min-height:0;}
div.section div.nav{position:absolute;width:150px;top:0;height:100%;left:0;}
/* 色づけ */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:white;}
div.section div.section{background-color:silver;}
div.section div.nav{background-color:fuchsia;}
div.footer{background-color:orange;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="nav" id="contentTable">
＿＿＿<h3>目次</h3>
＿＿</div>
＿＿<div class="section">
＿＿＿<h3>チェックすべきこと</h3>
＿＿＿<ol>
＿＿＿＿<li>DTDはstrictであるか</li>
＿＿＿＿<li>DOCTYPEは標準モードで動作するよう適切に書かれているか</li>
＿＿＿</ol>
＿＿＿<p>
＿＿＿＿基本的にこれだけを守っておけば、現行のブラウザでの差は出ないはずです。
＿＿＿</p>
＿＿</div>
＿＿<div class="nav" id="contentTable">
＿＿＿<h3>目次</h3>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistory">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2014-07-02</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さん　これは参考になります。
ありがとうございます。

通報する
お礼日時：2014/07/04 13:55

No.2

  • 回答者： nanden1548
  • 回答日時：

ＣＳＳをどのように書いているのかを表示しないと、回答ができないのでは？・・・

この回答への補足

nanden1548さん仰る通りです。
縦の隙間は解決しました。
#header { position: relative; width: 100%; height: 160px; }
#content { width: 950px; height: auto; margin-right: auto; margin-left: auto;
padding-right: 6px; }
#main { width: 700px; height: 1020px; float: right; }
#left { text-align: center; width:230px; float: left; height: 1020px; margin-right: 0px; margin-bottom: 5px; margin-top: 0px; }

contentを height: auto;　からheight: 1020px;にして、main left　上部は揃ったのですが、
leftが下がっている位置に合わせて並んだので、header との間に意図しない隙間ができています。

こちらのほうが不可解です。

補足日時：2014/07/04 08:08
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： tkmojo
  • 回答日時：

横幅の指定をせずにブロックレベル要素にfloatを使うのは自殺行為ですよ。


中のテキストの量だけ横幅が増えるので絶対まともにレイアウト出来ません。
テキスト量が伸び、左右のボックスがぶつかるともれなくカラム落ちです。

この回答への補足

tkmojoさん、ありがとうございます。
すみません、説明不足で、横幅はmain leftともに指定しています。

補足日時：2014/07/03 19:52
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報