修复我的布局有正确的页边距与CSS

我试图做一个布局，看起来像这样：修复我的布局有正确的页边距与CSS

------------------------------ 
| _|_________________|_ | 
| |content, content, | | 
|---| content, content, |---| 
| | content, content,| | 
| | content, content, | | 
| |content, content, | | 
| | content, content, | | 
| | content, content,| | 
|---| ................. |---| 
| |_____________________| | 
|  |     |  | 
-------------------------------

这是我设法想出到目前为止.....

边距和底部不是我想要的。

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
html, body { height:100% } 
#content { width:80%; min-width:600px; margin:0 auto; margin-top:10%; margin-bottom:10%; background:#CCCCCC; overflow:auto } 
</style> 
</head> 

<body> 

<div id='content'> 
content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, 
</div> 

</body> 
</html>

来源

2011-02-05 Ingup