I'm trying to include an OBJECT tag (or a IFRAME) in a page with a css layout made of a fixed header and footer and a full height content div.
The header and footer stay visible all the time while the content is scrollable.

I'm not able to understand why the OBJECT tag, inserted into the content DIV, occupies itsspace on the page, then enabling the scrollbar as expected, but overlaps the header or footer when scrolling up or down. I include the whole page code with embedded style. You won't be able to reach the OBJECT data="url" but the page shows the same behaviour, when encountering an error or not.

I'm using IE 7.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>A test</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	height: 100%; ;
	overflow: auto;
}
html > body #outermost-container {
	height: 100%;
}
#outermost-container {
	width: 760px;
	margin: 0 auto;
}
#header {
	width: 760px;
	height: 6em;
}
html > body #header {
	position: fixed;
	z-index: 10;
}
html > body #content-wrap {
	height: 100%;/* 100 % height */
}
html > body #content {
	padding: 9em 1em;
	z-index: 0;
}
#footer {
	width: 760px;
	height: 3em;
}
html > body #footer {
	position: fixed;
	bottom: 0;
	z-index: 10;
}
/* style */
html, body {
	background: #000000;
	background-color: #000000;
	color: #A4A4A4;
}
#content-wrap, #content {
	background: #333333;
}
#footer {
	text-align: center;
}
#header, #footer {
	color: #FFFFCC;
	background: #CC9900;
	background-color: #CC9900;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #FFCC00;
	border-bottom-style: solid;
	border-bottom-width: 5px;
	border-bottom-color: #FFCC00;
	font-family: Arial, Helvetica, sans-serif;
}
body {
	font: 74%/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
p {
	margin: 1em 0;
}
img {
	border: 0;
}
a {
	color: #C0C0C0;
	font-variant: normal;
	text-decoration: underline;
	font-style: normal;
}
a:hover {
	color: #808080;
	font-variant: normal;
	text-decoration: none;
}
a:visited {
	color: #A4A4A4;
	font-variant: normal;
}
.quotation {
	font-style: oblique;
	padding-right: 5px;
	padding-left: 10px;
	border-left-style: double;
	border-left-width: thin;
	border-left-color: #C0C0C0;
}
.quotation a {
	font-style: oblique;
}
#header-title {
	margin-top: 1em;
}
#header h1 {
	color: #FFFFCC;
}
#header h2, #header h3 {
	color: #FFFFCC;
}
#header h1, #header h2, #header h3 {
	font-weight: normal;
	text-transform: none;
	display: inline;
}
#header h1 {
	margin-left: 10%;
}
#header h3 {
	margin-top: 5%;
	margin-left: 5%;
}
#included-page {
	border: 0;
	height: 600px;
	width: 740px;
	overflow: hidden;
	z-index:2;
}
</style>
</head>

<body>

<div id="outermost-container">
	<div id="header">
		<div id="header-title">
			<h1>Primo</h1>
			<h3>Circolo</h3>
		</div>
	</div>
	<div id="content-wrap">
		<div id="content">
			<p>76856rth sdgsdf arg e5g fv asdfv asdf asd</p>
			<p>Loresdfg sdfgsdfg sdfg</p>
			<p>asdf asdf asdfare5t rgevg45 wef dfv</p>
			<p>This is the last line.</p>
			<object type="text/html" id="included-page" 

data="album/primopiano/index.html">
				<p>it does not work</p> 
			</object>
		</div>
	</div>
	<div id="footer">
		<p>something here</p>
	</div>
</div>

</body>

</html>
Any suggestion?