htmlとcssの勉強でヘッダーの下にメインイメージ、その下に
2カラムレイアウト、フッターを作成しようとしています。初心者なのでcssで背景色をつけてマークアップしてみました。
2カラムレイアウトの箇所はfloatを使用して左右に同じ高さに設定したいです。
発生している問題・エラーメッセージ
①設定していないのにヘッダーの上に余白が出来てしまいます。
②中央寄せをするためにcssでmargin:0 autoを記載すると同じ高さにしたい2カラムレイアウトのdiv#leftとdiv#rightの高さが変わってしまいます。
div#leftが上のメインイメージのにくっつき、div#rightがフッターにくっついて高さがばらばらになってしまいます。
該当のソースコード
(htmlのコードここから↓)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネストクリニック | まごころと優しさを大切に</title> <meta name="description" content="まごころと優しさをモットーに患者さんに寄り添った施術を。清潔感溢れるクリニックです。"> <meta name="keywords" content="ネストクリニック,病院"></head> <body><link rel="stylesheet" href="style.css" type="text/css" media="screen">
<!-- #wrapper ここから--> <div id="wrapper"> <!-- #header ここから--> <header> </header> <!-- #header ここまで--> <!-- #mainimage ここから--> <div id="mainimage"></div> <!-- #mainimage ここまで-->
<!-- #left ここから-->
<div id="left"></div>
<!-- #left ここまで-->
<!-- #right ここから-->
<div id="right"></div>
</body> </html> (htmlのコードここまで↑)<!-- #right ここまで--> <div id="clearfix"></div> </div> <!-- #wrapper ここまで--> <!-- #footer ここから--> <footer></footer> <!-- #footer ここまで-->
**(cssのコードここから↓)
**
@charset "utf-8";
/* ========================================
ラッパー
========================================= */
div#wrapper{
width: 960px;
height: auto;
margin: 0 auto;
}
/* ========================================
ヘッダー
========================================= */
header{
width: 960px;
height: 99px;
background-color: green;
}
/* ========================================
メインイメージ
========================================= */
div#mainimage{
width: 960px;
height: 300px;
background-color: aquamarine;
}
/* ========================================
レフト
========================================= */
div#left{
width: 280px;
height: 300px;
background-color: palevioletred;
float: left;
margin-right: 30px;
}
/* ========================================
ライト
========================================= */
div#right{
width: 650px;
height: 300px;
background-color: blue;
float: left;
}
div#clearfix{
clear: both;
}
/* ========================================
フッター
========================================= */
footer{
width: 100%;
height: 79px;
background-color: red;
}
(cssのコードここからここまで)
試したこと
①はcssのheaderにmargin-top:0;と入力してみました。
②においてもdiv#leftにmargin-bottom:0;と入力してみましたが変化はありませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー