長年の勘違い＠10月3日
今日は、floatを使った段組みレイアウトとイラストレーターの練習でした。
唯一使えるイラレで、なんと間違ったやり方を長年していた事が判明〜。
他にも、いっぱいありそうな・・・。
floatの段組みレイアウト(10PXの余白があるレイアウト)
↑相当こんがらがったので、まとめてみました。
◎clearは、上の空きは絶対出来ない。
→wrapperのmargin指定で、余白を入れる
◎margin同士は、相殺される。
marginとpaddingは、相殺されない。
→上の余白は、headerのmarginを０にして、余分の余白を取る。
◎「clear: both」も「wrapper { overflow: auto; margin-bottom: 10px;」も役割は同じ。どちらか一方で、OK。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN""http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja"
xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style Type" content="text/css" />
<title>10/03 TEST</title>
<style type="text/css">
<!--
*{
margin: 0;
padding: 0;
}
body{
background-color: #d2e5e5;
}
#container{
width: 800px;
height: auto;
margin: 0 auto;
padding: 10px 0;
background-color: #ffffff;
}
#header{
width: 780px;
height: 90px;
margin: 0 10px 10px 10px;
background-color: #ff6666;
}
#wrapper{
width: 800px;
height: auto;
margin: 0 0 10px 0;
overflow: auto;
}
#content {
width: 585px;
height: 350px;
margin: 0 10px 0 0;
background-color: #ffcccc;
float: right;
}
#sidebar{
width: 185px;
height: 350px;
margin: 0 0 0 10px;
background-color: #ff9966;
float: left;
}
#footer{
width:780px;
height: 90px;
margin: 0 10px 0 10px;
background-color: #cc6666;
clear:both;
}
-->
</style>
<head>
<div id="container">
<div id="header">heder</div>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>
</head>
</html>
