Fix my layout to have correct margins with css_问答_开发者

I am trying to make a layout that looks like this:

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

This is what I managed to come up with so far.....

The margin-top and bottom isn't what I want.

<!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, co开发者_如何学JAVAntent, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, 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>

why you can't try the margin in pixels?

margin:10px

margin:10px 11px 12px 13px;

top right bottom left correspondingly

I'm making a few educated guesses here:

I see height: 100%, and you're obviously trying to horizontally center <div id='content'>.
So, that picture is the whole window, and you want it to scale when the window is resized.
I also see min-width: 600px, so you want there to be a minimum width (and height?).
overflow: auto - either you're preparing to clear floats, or you're trying to make it scroll if the content is too long.
I'm not sure what the four boxes are supposed to be doing.

Live Demo (edit)

I have added your code to JSFiddle:

http://jsfiddle.net/Mutant_Tractor/RpWpN/1/

I added height:80%; this seems to achieve what you are after.