zhuangya/layout-demo.html

## layout-demo.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>demo</title>
  <style type="text/css" media="screen">
  .wrapper {
    width: 640px;
    background-color: #f7f7f7;
    color: #333;
    margin: auto;
    position: relative;
  }

  .wrapper:after {
    content: '\0020';
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
  }

  .sidebar {
    position: absolute;
    outline: 1px solid green;
    bottom: 0;
    left: 0;
    width: 240px;
  }

  .main {
    width: 400px;
    float: left;
    margin-left: 240px;
    outline: 1px solid gray;
  }
  </style>

</head>
<body id="index" onload="">
  <div class="wrapper">
    <div class="sidebar">
      <p class="author">author</p>
    </div>
    <div class="main">
      <h2>The title</h2>
      <p class="content">
        表面上看，司机的收入与其他岗位员工没有区别。但实际操作起来，冯晓铭是为领导服务的司机，同时兼任厅下属公司的办公室副主任。

        2011年，冯晓铭每月绩效工资要比别人高800元至1000元，年底的绩效工资更是多出一倍以上。

        除了绩效工资，冯晓铭所在单位还搞“安全风险抵押金”，冯晓铭2011年返还的各种风险抵押金有2万元。

        单位逢年过节曾发放“购物卡”，冯晓铭是既能从总公司拿福利，还能从下属单位拿到一份，从2006至2011年，冯晓铭每年收到的购物卡，都不会少于3万元。2012年，取消了“双薪”，冯晓铭的收入比2011年少了好几万。
      </p>
    </div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>demo</title>
	<style type="text/css" media="screen">
	.wrapper {
	width: 640px;
	background-color: #f7f7f7;
	color: #333;
	margin: auto;
	position: relative;
	}

	.wrapper:after {
	content: '\0020';
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	}

	.sidebar {
	position: absolute;
	outline: 1px solid green;
	bottom: 0;
	left: 0;
	width: 240px;
	}

	.main {
	width: 400px;
	float: left;
	margin-left: 240px;
	outline: 1px solid gray;
	}
	</style>

	</head>
	<body id="index" onload="">
	<div class="wrapper">
	<div class="sidebar">
	<p class="author">author</p>
	</div>
	<div class="main">
	<h2>The title</h2>
	<p class="content">
	表面上看，司机的收入与其他岗位员工没有区别。但实际操作起来，冯晓铭是为领导服务的司机，同时兼任厅下属公司的办公室副主任。

	2011年，冯晓铭每月绩效工资要比别人高800元至1000元，年底的绩效工资更是多出一倍以上。

	除了绩效工资，冯晓铭所在单位还搞“安全风险抵押金”，冯晓铭2011年返还的各种风险抵押金有2万元。

	单位逢年过节曾发放“购物卡”，冯晓铭是既能从总公司拿福利，还能从下属单位拿到一份，从2006至2011年，冯晓铭每年收到的购物卡，都不会少于3万元。2012年，取消了“双薪”，冯晓铭的收入比2011年少了好几万。
	</p>
	</div>
	</div>
	</body>
	</html>