Hello Erindesign,
I'm sure there's other ways of doing this - I'm not that handy with using absolute positioning. Anyway, here's one way:<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body{
text-align: center;
background-color: #000000;
}
* {
margin: 0;
padding: 0;
}
#box {
width: 400px;
margin: 20px auto 20px auto;
background-color: #33CCCC;
position: relative;
}
#menu {
width: 150px;
height: 200px;
background-color: #ffffff;
position: absolute;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="box">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div id="menu">
<h3>Menu</h3>
<!--closes menu--></div>
<!--closes box--></div>
</body>
</html>
It runs into problems when the content of #box shrinks to less than the 200px height of #menu.