Why is this??

I am working on buliding a website with a template I found on openwedesign. While checking it on IE everything renders well but looking at it on firefox the footer section has rise up to the middle of the site and bursted the template all up. http://rtc.ehomeshowings.net/ I have include the css from the site can anyone see why this is happening



* {
padding:0;
margin:0;
}

/* CSS Document */

#container
{
width:790px;
margin:auto;
background-color:#FFFFFF;
}

#header
{
background-image:url(images/header_bg.jpg);
width:790px;
height:27px;
}


#left-pic
{
background-image:url(images/mobile3.jpg);
width:357px;
height:286px;
margin-top:2px;
}

#right-pic
{
background-image:url(images/logo.jpg);
width:433px;
height:106px;
margin-top:-285px;
margin-left:357px;
}

#title1
{
width:230px;
height:31px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#09afde;
font-size:24px;
font-weight:bold;
float:left;
margin-left:29px;
}

#title2
{
width:240px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#09afde;
font-size:14px;
font-weight:bold;
height:18px;
float:left;
margin-left:34px;
margin-top:6px;
}

#blue-line
{
background-image:url(images/blue-line.jpg);
background-repeat:no-repeat;
width:433px;
height:75px;
margin-left:357px;
}

#about_bg
{
background-image:url(images/white-bg.jpg);
background-repeat:no-repeat;
width:433px;
height:105px;
margin-left:357px;
}

#about-title
{
width:400px;
height:22px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#8E8E8E;
font-size:14px;
font-weight:bold;
float:left;
}

#about-content
{
width:415px;
height:65px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:11px;
font-weight:normal;
float:right;
margin-right:14px;
margin-top:8px;
}

#Middle_bg
{
background-color:#FFFFFF;
width:790px;
}

#Latest
{
width:329px;
height:157px;
float:left;
margin-left:10px;
}

#Latest-title
{
width:300px;
height:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#8e8e8e;
font-size:14px;
font-weight:bold;
float:left;
}

#Latest-Content
{
width:314px;
height:85px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:11px;
font-weight:normal;
float:left;
}

#Read-button
{
background-image:url(images/left-button.jpg);
background-repeat:no-repeat;
width:79px;
height:27px;
float:right;
margin-right:10px;
}

#Read-more
{
width:70px;
height:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:10px;
font-weight:bold;
height:10px;
margin-top:2px;
}

#Catalog
{
width:427px;
height:184px;
float:right;
margin-right:05px;
}

#Catalog-title
{
width:400px;
height:22px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#8e8e8e;
font-size:14px;
font-weight:bold;
float:left;
}
#Catalog-pic
{
background-image:url(images/rider.jpg);
background-repeat:no-repeat;
width:420px;
height:120px;
margin-top:35px;
float:right;
margin-right:-05px;
padding-right:-2px;
}

#right-Button
{
background-image:url(images/right-button.jpg);
width:89px;
height:25px;
float:right;
margin-right:-05px;
}

#see-them-all
{
width:77px;
height:25px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:10px;
font-weight:bold;
height:10px;
margin-top:2px;
margin-left:6px;
}

#Getting-started-title
{
width:202px;
height:22px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#8e8e8e;
font-size:14px;
font-weight:bold;
float:left;
margin-left:10px;
margin-top:30px;
}

#Getting-started-content
{
width:742px;
height:101px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:11px;
font-weight:normal;
float:left;
margin-top:10px;
margin-left:10px;
}

#maincontent {
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
clear:both;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:justify;
}

#maincontent-title {
width:100px;
height:22px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#8E8E8E;
font-size:14px;
font-weight:bold;
clear:left;
}

#Footer_bg
{
background-image:url(images/header_bg.jpg);
width:790px;
height:27px;
margin-top:40px;
}

#Footer-links
{
width:275px;
height:21px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:10px;
font-weight:bold;
margin-left:245px;
}

#Copy-rights-title
{
background-image:url(images/white-bg.jpg);
width:790px;
height:37px;
}

#copy-right
{
width:345px;
height:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:10px;
font-weight:normal;
margin-top:-35px;
margin-left:200px;
}

.home-link
{
width:46px;
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:11px;
font-weight:normal;
}

.link1
{
width:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:11px;
font-weight:bold;
float:left;
padding-top:20px;
padding-left:60px;
}

.link2
{
width:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#a2244e;
font-size:11px;
font-weight:bold;
float:left;
padding-top:20px;
padding-left:60px;
}

.title4{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#ffffff;
width: 400px;
text-align:center;
text-decoration:none;
}
.foottxt{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:normal;
color:#000000;
text-align:center;
margin-left: 0px;
margin-top: -20px;
text-decoration:none;


}

 

You didn't contain your float elements. Remove the height property from #about_bg and add {overflow: hidden;}. Add the overflow property to #Middle_bg, too.

Whoever wrote the template obviously doesn't understand how css works with floats and block formatting contexts.

cheers,

gary

 

thank you so very much Gary