Forum Moderators: not2easy
What I'm trying to do is have a 790px width cell centred in the browser window and have a 10px space at the top and bottom of the browser window. The cell would also have a 30px grey border. Within that cell there would be 3 rows. top (100px fixed) for header, middle (50px fixed) for navigation and bottom section would be the content area and would therefore need to be fluid within the cell so if the user resizes their browser window then the main cell would still remain 10px from top and bottom of browser.
I hope all this makes sense and someone may be able to guide me in the right direction. Thanks in advance for any help.
*{margin:0;padding:0} /*this is my preference for universal reset of spacings*/
body{padding:10px 0;text-align:center}/*the two text-align things which appear over these two lines are to fix IE's quirky rendering*/
#main{width:790px;margin:0 auto;border:30px solid gray;text-align:left;background-color:#fc0}/*margin:0 auto; means 0 margin on top and bottom, centered on left-right.*/
#header{height:100px;background-color:#5cd}
#mysterydiv{height:50px;background-color:#ff3}
#content{background-color:#d4a}
</style>
</head>
<body>
<div id="main">
<div id="header">
test
</div>
<div id="mysterydiv">
</div>
<div id="content">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</div>
</body>
</html>
