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?