Background color of the wrapper

HTML & CSS
1 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layOut_01</title>

<style type="text/css">
*{margin:0px;padding:0px}
.pd5{padding:5px}
</style>

</head>
<body class="pd5">
<div style="[COLOR="#FF0000"]background:green[/COLOR]">
  <div style="float:left;background:yellow">left</div>
  <div style="float:right;background:pink">right</div>
</div>

</body>
</html>

The code above is at http://dot.kr/x-test/layOut/001.php .
I can see the yellow backgound in the left and pink background in the right.
But where can I the background color:green ?

If I want to see the background color:green, I can I see it?

2

Add something like this:


<div style="background:green">
    <div style="float:left;background:yellow">left</div> 
    <div style="float:right;background:pink">right</div>
    [color=blue]middle[/color]
</div>

or this:


<div style="background:green; [color=blue]overflow:hidden;[/color]">
    <div style="float:left;background:yellow">left</div> 
    <div style="float:right;background:pink">right</div>
</div>

The floated containers are removed from the flow and have no height so the <div> with the background-color has no height. Overflow-hidden contains the floats and gives it height so the green is visible. Likewise, adding text gives it height so the green shows but does not contain the floats.