A test page to show the problem:
URL
http://www.vanderweij.demon.nl/div.html
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testpage</title>
<style>
body {
width: 40em;
margin: 5px auto;
color: #ccc;
}
h1, h2, .mark {
color: #000;
}
#leftcontent, #rightcontent, #centercontent, #header, #footer {
border: 1px solid #aaa;
margin: 5px;
}
#content {
border: 1px solid #f00;
}
#header {
background: #ffc;
height: 3.8em;
}
#centercontent {
margin-left: 10em;
margin-right: 10em;
}
#leftcontent {
float: left;
width: 9em;
}
#rightcontent {
float: right;
width: 9em;
}
.spacer {
clear: both;
}
.item {
border: 1px solid #009;
margin: 5px;
}
.item img {
float: right;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
<h1>Header block</h1>
</div>
<div class="spacer"></div>
<div id="leftcontent">
<h2>Menu block</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div id="rightcontent">
<h2>Events block</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div id="centercontent">
<div class="item">
<h1>Intro</h1>
<span class="mark">Floating page layout. Beforehand, the height of these
boxes is unkown.</span>
</div>
<div class="item">
<h1>Problem</h1>
<img src="test.jpg" width="200" height="200">
<span class="mark">The image should be contained inside this box.</span>
</div>
<div class="item">
<h1>Item</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="spacer"></div>
</div>
<div class="spacer"></div>
<div id="footer">
<h2>Footer block</h2>
</div>
</body>
</html>