固定幅＋リキッドレイアウトの制作を行っているのですが、ヘッダー右端が白くなってしまいます。
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
</div>
#container {
width:100%;
height:100%;
}
#header {
width:100%;
height:80px;
background: #000;
}
#left {
width: 300px;
height:600px;
float: left;
}
#right {
width: 100%;
height:600px;
float:left;
}
HTMLとCSSの基本的な概念は理解しているものの詳しいレイアウト組みについて深く理解できていないです。教えていただけないでしょうか？
みんなの回答 6 件
私が見た場合は上記の症状は再現されませんでした。
確認したブラウザはMacのFireFox、Safari、GoogleChromeです。
※現時点で全て最新版です。
主が確認したブラウザは何ですか？
ちなみに、
#right {
width: 100%;
height:600px;
float:left;
}
上記の指定だとrightが100%になっているのでカラム落ちしてしまいます。
leftが300pxならそれを引いた数値をrightのwidthに%指定しないといけませんよ。
ブラウザのデフォルトcssが効いているのではな いでしょうか。
cssを以下のようにリセットするか、
活用して制作を進める必要があります。
-----------------
html, body { margin: 0; padding: 0; }
-----------------
リセットcssでググると参考となるcssが出てきま すよ。
#containerに『min-width』で最小幅(.leftの幅『600px』)を指定するというのはどうでしょうか？見当違いでしたらすみません。
#right {
margin: 0 0 0 300px;
background: #fff;
}
って変えろ。それで解決だ。
開いた時にスクロールバー出てる？
開いてるブラウザのサイズが600px以下とかじゃないよね。
600px以下で見たらheaderは100%だから600px以下で途切れるけど、leftはwidth:600pxだから、その差分は空白になるよ。
その場合は上で言われてるmin-width:600px;を指定してやれば起きない。
htmlうｐれよ
関連するトピックス