Hi, I'm trying to style three divs so that two lie on top of each other, and the third lies in the normal page flow.

I have an example below...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS demo</title>
</head>

<body>
<div id="titlebg" class="bg" >
      	  <p>&nbsp;</p>
      	  <p>&nbsp;</p>
      	  <p>&nbsp;</p>
      	  <p>&nbsp;</p>
      	  <p>&nbsp;</p>
      	  <p>&nbsp;</p>
        </div>
        <div id="titletext">
      <h1>Welcome!!</h1>
           Britain novernment too,  neears, Gown's needs a government needs a hirely constister not toe generally elected into the. Britain not just aeected into the offe 26 whave seved Gown'ssin00  but it has incracked its own maate. Toenerally novernment its too own maate hirely constister notoffe 26 whave seved sin00  but it has, not just a neears, incracked government.
        </div>	
        <div id="maintext">
      <h2>Welcome!!</h2>
           Britain novernment too,  neears, Gown's needs a government needs a hirely constister not toe generally elected into the. Britain not just aeected into the offe 26 whave seved Gown'ssin00  but it has incracked its own maate. Toenerally novernment its too own maate hirely constister notoffe 26 whave seved sin00  but it has, not just a neears, incracked government.
        </div>	
</body>
</html>
...so the main text div would lie at the bottom. I seem to be struggling to stop the maintext counting the upper divs as having no height.

Any suggestions?