双飞翼布局及其他方案

dabblet.css

.wrap{
	width: 980px;
	margin: 20px auto;
	background: #f8f8f8;
}
.wrap .main, .wrap .sub, .wrap .secondy{
	background: #f0f0f0;
}
.wrap .sub{
	height: 300px;	
}


/*layout-float*/
.layout-float{
	margin-top: 12px;
}
.layout-float:after{
	display: table;
	height: 0px;
	clear: both;
	content: "\0020";
}
.layout-float .main-wrap{
	float: left;
	width: 100%;	
}
.layout-float .main{
	margin: 0 300px 0 200px;
}
.layout-float .sub{
	float: left;	
	width: 180px;
	margin-left: -100%;
	margin-right: 20px;
}
.layout-float .secondy{
	float: left;
	width: 280px;
	margin-left: -280px;
}


/*layout-relative*/
.layout-relative{
	position: relative;
}
.layout-relative .main{
	margin: 0 300px 0 200px;
}
.layout-relative .sub{
	position:absolute;
	top: 0px;
	left: 0px;
	width: 180px;
	margin-right: 20px;
}
.layout-relative .secondy{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 280px;
	margin-left: 20px;
}

dabblet.html

<div class="wrap layout-float">
  <div class="main-wrap">
  	<div class="main">
  		main-content
  	</div>
  </div>
  <div class="sub">sub</div>
  <div class="secondy">secondy</div>
</div>


<div class="wrap layout-relative">
  <div class="main">main</div>
  <div class="sub">sub</div>
  <div class="secondy">secondy</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}