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
or
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.
加载中,请稍侯......
精彩评论