DIV兑现的BorderLayout布局 _Web前端

DIV实现的BorderLayout布局

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;border:0;">
 <head>
  <title>DIV BorderLayout Test</title>
 </head>
<style type="text/css">
.layout-north{height:10%;}
.layout-middle{height:70%;background:yellow;}
.layout-west{float:left;width:20%;height:100%;background:green;}
.layout-center{float:left;width:70%;height:100%;background:grey;}
.layout-east{float:right;width:10%;height:100%;background:red;}
.layout-south{height:20%;}
</style>
 <body style="height:100%;margin:0;">
	<div class="layout-north">
		north
		<br>
		north
	</div>
	<div class="layout-middle">
		<div class="layout-west">
			west
		</div>
		<div class="layout-center" >
			center
		</div>
		<div class="layout-east">
			east
		</div>
	</div>
	<div class="layout-south">
		south
	</div>
 </body>
</html>