前提・実現したいこと
float left
を設定した要素をA、その次の要素をBとしたときに
Aの下にBを回り込ませたい。
発生している問題・エラーメッセージ
上のことをしたいとき、下に回り込む場合と回り込まない場合があり
違いがわかりません。
最初の2つのコードは今回問題が発生しているセットで、
次の2つのコードは下に回り込むような、僕が期待している動作をするセットです。
該当のソースコード
HTML5
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>3カラムレイアウトサンプル</title> 6<link rel="stylesheet" href="style2.css" media="all"> 7</head> 8 9<body> 10<div id="wrap"> 11 <header id="header">ヘッダー領域<br>ヘッダー領域<br>ヘッダー領域</header> 12 13 <div id="contents"> 14 <main id="main"> 15 <p>メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。</p> 16 <p>メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。</p> 17 <p>メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。</p> 18 <!-- /#main --></main> 19 <aside id="side"> 20 <p>サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。</p> 21 <!-- /#side--></aside> 22 <!-- /#contents --></div> 23 24 <nav id="navi"> 25 <ul> 26 <li>メニュー項目</li> 27 <li>メニュー項目</li> 28 <li>メニュー項目</li> 29 <li>メニュー項目</li> 30 <li>メニュー項目</li> 31 <li>メニュー項目</li> 32 <li>メニュー項目</li> 33 </ul> 34 <!-- /#navi --></nav> 35 <footer id="footer">フッター領域<br>フッター領域<br>フッター領域</footer> 36</div> 37</body> 38</html> 39
CSS3
1@charset "UTF-8"; 2/* CSS Document */ 3 4*{ 5 margin:0; 6 padding:0; 7} 8ul { 9 list-style: none; 10} 11 12 13#wrap { 14 width: 800px; 15 margin: 30px auto; 16 background-color: beige; 17} 18 19#header { 20 background-color: lightpink; 21} 22 23#side { 24 background-color: skyblue; 25 width: 200px; 26} 27 28#main { 29 background-color: palegreen; 30 width: 360px; 31 float: left; 32} 33 34 35#navi { 36 background-color: plum; 37 width: 200px; 38} 39 40/* ここでfloat: left;にすることで、 41HTMLにおいて次の要素のnavi(cssではplum色)が 42オレンジの下に入って見えなくなることを期待しています。 */ 43#contents { 44 background-color: orange; 45 border: 3px solid orange; 46 width: 580px; 47 float: left; 48} 49 50#footer { 51 background-color: gold; 52} 53
HTML5
1<!DOCTYPE html> 2 3<html> 4 <head> 5 <link rel="stylesheet" href="style.css"> 6 </head> 7 8 <body> 9 <div class="yellow"></div> 10 <div class="green"></div> 11 <div class="pink"></div> 12 </body> 13 14</html>
CSS3
1* { 2 margin: 0px; 3 padding: 0px; 4} 5 6/* 黄色の下に緑が回り込むことがブラウザで確認できて、 7こういう動きを、最初のHTML、CSSのセットでも期待しています。 */ 8.yellow { 9 background-color: yellow; 10 width: 200px; 11 height: 250px; 12 float: left; 13} 14 15.green { 16 background-color: green; 17 width: 250px; 18 height: 200px; 19 border: 3px solid black; 20} 21 22.pink { 23 background-color: pink; 24 width: 300px; 25 height: 100px; 26}
補足情報(FW/ツールのバージョンなど)
ブラウザ: chrome
>Aの下にBを回り込ませたい。
→ どの要素のことですか?
AやBというのは一般的な表現なだけで、具体的にコードの中で現れるわけではないです。
コードをご覧になれば分かるかと思いますが、最初のCSSファイルにおいてはcontentsがA、
naviがBにあたります。
回り込んでいます。
「回り込む」とは、コード中のコメントのように「naviを表すピンク色がcontentsを表すオレンジ色の下に回り込んでブラウザではピンク色が見えなくなる」という意味ですか?
floatの回り込みで、テキストまでを要素の下に隠すようにはできません。
#naviにテキストがあるので、見えなくなることはありません。どうしても隠したい場合は、positionで調整すると良いかと思います。
-追記しました。-
テキストのあるなしが理由というのは、yoshinaviさんの経験から知ったことなのか、理屈的にそうなのかどちらなのでしょうか。もし理屈的にそうなら教えていただけるとありがたいのですが。。
回答1件
あなたの回答
tips
プレビュー