Question about the CSS external container margin [height: 100% in IE]

A commonly used two-column layout. The external container Div defines class as iner, which contains two sub-Div groups, left and Main. The lower part is the DIV whose class is foot.

When we wanted to add a gap between the iner and foot, deletefox started to get angry.
The token generation is as follows: <! 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; charsets = UTF-8"   />
< Title > </ Title >
< Style Type = "Text/CSS" >
. Container {} { Border : 1px #333 solid ; Width : 600px ; Margin-bottom : 20px ; }
. Container. Left {} { Width : 300px ; Float : Left ; Height : 100px ; Background : # F60 ; }
. Container. Right {} { Width : 300px ; Float : Left ; Height : 300px ; Background : # Ccc ; }
. Foot {} { Clear : Both ; Width : 600px ; Height : 20px ; Background : #3d78b6 ; Border : 1px solid #000000 ; }
</ Style >
</ Head >
< Body >
< Div Class = "Container" >
< Div Class = "Left" > </ Div >
< Div Class = "Right" > </ Div >
</ Div >
< Div Class = "Foot" > </ Div >
</ Body >
</ Html >

The above code can be normally displayed in IE6, but there is no gap between iner and footer in Firefox, that is, margin-bottom: 20 does not work.
Resolution method:
Modify the container and generate the following: . Container {} {Overflow:Hidden;Border:1px #333 solid;Width:600px;Margin-bottom:20px;}

Region is in this sentence