Forum Moderators: not2easy
I can solve this in at least three ways...
1) eliminate the absolute positioning on the DocHeader
2) eliminate the width in the DocBody
3) make DocBody position absolute
For various reasons[1] none of these are acceptable. Is there another way?
[1]Details relevant to the full page this was taken from:
1) DocHeader is absolute because there are overlapping elements within, all images, that are positioned absolute within its centered margins
2) DocBody is centered with a fixed-width border
3) Making DocBody absolute only pushes the problem to the next block. Because DocBody does not have a fixed height the block that follows can not be positioned absolute.
Thanks,
Amy
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
#DocHeader
{
position: absolute;
}
#DocBody
{
margin-top: 234px;
width: 800px;
}
</style>
</head>
<body>
<div id="DocHeader">
</div>
<div id="DocBody">
<h2>This is a heading</h2>
<p>This is some text</p>
</div>
</body>
</html>
1) Use padding on the body rather than margin. This causes the border of the body to extend to the top of the page, but that is fixed by adding the padding to a wrapper around the body and eliminating the margin on the body.
2) Move the placement:absolute content after the static content in the html. This has the added advantage of making the body more relevant to search engines.
