Problem with CSS floating elements

Maybe the problem is just my understanding of CSS and I've done something stupid. Anyway, I've created a page to demonstrate what I mean:

http://www.inkandmedialtd.co.uk/misc/css.html
(The URL is from the company I work for)

Here is the code with inline styles:

<!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" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>CSS Test</title>
</head>
<body style="background-color: gray; font-family: Arial; font-size: 14px;">
 <div style="width: 800px; background-color: white; height: 400px; padding: 0px;">
  <div style="float: left; width: 50%; display: inline; background-color: #00FF00;"><p>Cell 1 floated to left</p></div>
  <div style="float: left; width: 50%; display: inline; background-color: blue; color: white;"><p>Cell 2 floated to left</p></div>
  <div style="clear: both; margin-top: 20px; background-color: red; color: white; height: 50px;"><p>How do I get a margin above this red box?. 
Another thing - why does the default margin of the &lt;p&gt; element get ignored here?</p></div>
</div>
</body>
</html>

If I put the two floated DIV's into another container DIV, the DIV is unlikely to expand properly from what I've seen in the past. Unless you put a <br style="clear: both" /> underneath, which is a bit of a hack that doesn't always work.

Any suggestions would be very welcome.

Thanks,

James