Welcome to SitePoint!
Am afraid you are misinterpreting a few concepts in your code and may have to rethink what you are trying to do.
#1) you have some conflicting rules, but that not what really holding you back
#2) you used position:absolute; on #maincontent this takes your element out of the normal flow. that means that the size of #maincontent doesn't affect its parent #pagewidth.
anyway, may have miscalculated some numbers for the exact dimensions of your page, but i think this is what you were trying to achieve:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body, html {
height: 100%; margin:0;
}
#pagewidth {
width: 815px;
margin: -20px auto 0 auto;
padding:0; border-style: solid; border-color:#000;
border-width:30px;
border-top-width:0;
border-bottom-width:20px;
background-color: $fff;
min-height:100%;
}
#cwrap{
border-top:350px solid #000;
background-color: #fff;
}
#maincontent{
padding: 30px;
}
</style>
</head>
<body>
<div id="pagewidth">
<div id="cwrap">
<div id="maincontent">
<p>the content goes here</p>
</div>
</div>
</div>
</body>
</html>
Reply With Quote
Originally Posted by EricWatson
Bookmarks