授業日誌　5/10　floatの段組み

理解があやふやなところが多かったので、自分なりに整理し記述をして見ました。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>floatの段組み</title>
<style type="text/css">
<!--
body {
  background-color: #f0f8ff;
}

#container {
  width: 700px;
  height: auto;
  margin: 50px auto;
}

#header {
  width: 700px;
  height: 100px;
  background-color: #7fffd4;
  margin-bottom: 20px;
}

#wrapper {
  width: 700px;
  height: auto;
  background-color: pink;
/* overflow: auto; */
}

#content {
  width: 450px;
  height: 300px;
  background-color: #ffa07a;
  margin: 0 50px 20px 0;
  float: left;
}

#sidebar {
  width: 200px;
  height: 300px;  
  background-color: #f0e68c;
  float: right;
}

#footer {
  clear: both;
  width: 700px;
  height: 100px;
  background-color: #00ced1;
}

-->
</style>
</head>
<body>
<div id="container">
      	  <div id="header">header</div>
   <div id="wrapper">
	   	 <div id="content">content</div>
	     <div id="sidebar">sidebar</div>
   </div>
	     <div id="footer">footer</div>
</div>
</body>
</html>

標準画面サイズの変遷 640px → 760px → 960px

float は浮き上がる（floatしていないものはその背景に潜り込んむ）
contentとsidebar　両方浮き上がるとwrapperは、潰れる
レイアウトは幅指定が大切
footerにclear: bothを付けた（回り込み解除する）
margin はfloatしてるオブジェクトの長い方につける→もう一方を押し出しす