Floated 2col with a parent div

ok, say i did something like this:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<div style=" background-color:#FF0000;">
    <div style="width:50%; background-color:#00ff00; height:423px; float:right;">gadfgadgrgdrg</div>
    <div style="width:30%; background-color:#0000ff; height:300px; float:left;">gfdahadgfsdgahadfdgh</div>

How can i get that background div(the red one) to show and contain the other divs?

My real issue us having this div stretch to fit the info in either column.

problem link:

bottom left hand column, goes out of the parent, any ideas?