Hi,

I am having a problem with my layout. It has 3 divs side by site, with the biggest one in the middle. However, when I have a look on Firefox and Google Chrome, the divs are all on top of each other.

I will copy and paste the code for what I am woking on .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head><meta name="google-site-verification" content="UIGBw8kPhseHYv9heDfLM7Hiq3SypGzE9GXGxvapDRc" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="description" content="Best Money Saving Comparison Websites" /><meta name="keywords" content="Money, Comparison Websites, Loans, Savings, Mortgages, Insurance, Holidays, Finance, Car Insurance, Home Insurance, Travel Deals, Best Deals, Money Saving, Compare, Money Market" />

<title>Best Money Saving Sites</title>
<style type="text/css">








.style2 {
margin-bottom: 14px;
}
</style>
<link href="styles/style4.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
<style type="text/css">
.style1 {
text-align: justify;
}
.style2 {
font-family: Arial;
}
.style4 {
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
}
.style5 {
font-size: 11pt;
}
</style>
</head>

<body>

<!-- Begin Container -->
<div id="container" style="width: 800px">
<!-- Begin Masthead -->
<div id="masthead">
<p class="style1"></p>
<p class="style1"></p>

<p></p>
<p></p>
<p></p>
<div class="style1" style="text-align: center">
<br />
<br />
<span class="style2" style="font-size: 20.0pt; mso-bidi-font-size: 12.0pt; mso-fareast-font-family: &quot;Times New Roman&quot;; color: silver; mso-ansi-language: EN-GB; mso-fareast-language: EN-US; mso-bidi-language: AR-SA">
BEST COMPARISON WEBSITES</span> <br />
<br />
<br />
<span style="font-size:14.0pt;mso-bidi-font-size:12.0pt;
font-family:Arial;mso-fareast-font-family:&quot;Times New Roman&quot;;color:silver;
mso-ansi-language:EN-GB;mso-fareast-language:EN-US;mso-bidi-language:AR-SA">An
Easy to Use Guide</span></div>
<p style="height: 45px">&nbsp;</p>
<p style="height: 45px">&nbsp;</p>
</div>
<!-- End Masthead -->
<!-- Begin Navigation -->
<div id="navigation">
<ul>
<li class="style4" style="width: 64px"><a href="index.html">Home</a></li>
<li class="style4"><a href="general3.htm" style="width: 80px">
General 3</a></li>
<li class="style4"><a href="insurance.htm" style="width: 80px">Insurance</a></li>
<li class="style4" style="width: 67px"><a href="loans.htm">Loans</a></li>
<li class="style4" style="width: 80px"><a href="savings.htm">Savings</a></li>
<li class="style4" style="width: 84px"><a href="mortgages.htm">Mortgages</a></li>
<li class="style4" style="width: 80px"><a href="holidays.htm">Holidays</a></li>
<li class="style4" style="width: 80px"><a href="mobiles.htm">
Mobiles</a></li>
<li class="style4" style="width: 85px">
<a href="computers.htm" style="width: 73px">
Computers</a></li>

<li class="style4" style="width: 80px; margin-right: 0px;">
<a href="links.htm" style="width: 67px">
Links</a></li>
</ul>
</div>
<!-- End Navigation -->
<!-- Begin Page Content -->
<p>&nbsp;</p>
<div align="center"><script type="text/javascript"><!--
google_ad_client = "pub-0805817182185303";
/* 728x90, created 1/7/10 */
google_ad_slot = "8992674285";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br />
<br />
</div>

<div id="column_1" style="width: 165px; height: 650px;"
<div style="margin-left: 25px;">

<script type="text/javascript"><!--
google_ad_client = "pub-0805817182185303";
/* 160x600, created 12/30/09 */
google_ad_slot = "7047836331";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>


<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

<div id="column_2" style="height: 773px; width: 408px" class="style1">


<span style="font-family: Arial, Helvetica, sans-serif">


<span style="font-size: xx-large">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; More
General Sites<br />
</span><span class="style1" style="font-size: 11pt; text-transform: none"><br />
<br />
</span><span class="style5"><a href="http://www.which.co.uk" target="blank">
Which</a></span><br />
<br />
<span class="style1" style="text-transform: none; font-size: 11pt">
<span class="style4">A genuine and often invaluable friend to the consumer
over many years and still going strong in providing clear and unambiguous
help to the British public.<br />
<br />
<a href="http://www.thisismoney.co.uk" target="blank">This is Money</a><br />
<br />
A comprehensive range of products and financial services are examined and
reviewed by this major player in the field of online financial advice in the
UK.<br />
<br />
<a href="http://www.uswitch.com" target="blank">U Switch</a><br />
<br />
Another general financial advice site that is well worth a visit. Advises on
the benefits of changing supplier with a view top making savings.<br />
<br />
<a href="http://www.switchwise.com" target="blank">Switchwise</a><br />
<br />
Site specialising in comparing gas and electric prices throughout the UK.<br />
<br />
<a href="http://www.moneyhelpline.com" target="blank">Money Helpline</a><br />
<br />
Another national site providing comparisons of a wide range of comparisons
of financial services and providers. <br />
<br />
<a href="http://www.beatthatquote.com"target="blank">Beat that Quote</a><br />









<br />
Claims to be the UK's fastest growing price comparison website. Also
provides quotes for wills and legal services. <br />
<br />
<a href="http://www.moneyexpert.com"target="blank">Money Expert</a><br />
<br />
Site specialising in providing comparisons of a range of financial services.</span></span></span><br />
</div>
<div id="column_3" style="width: 189px; height: 651px;">

<script type="text/javascript"><!--
google_ad_client = "pub-0805817182185303";
/* 160x600, created 12/30/09 */
google_ad_slot = "7047836331";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>


<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>


<!-- End Page Content -->

<!-- Begin Footer -->
<div id="footer">
<p>Copyright © 2010 Best Money Saving Sites. All Rights Reserved.</p>
</div>
<!-- End Footer --></div>
<!-- End Container -->
</body>

</html>
CSS

@import url(layout.css);
body {
color: black;
font-size: 13px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color: #d3d9d6;
text-align:justify;
}
#container {
background-color: #fff;
width: 800px;
margin: 0 auto;
border-top: 0;
border-right: 1px solid #b7b7b7;
border-bottom: 0;
border-left: 1px solid #b7b7b7;
text-decoration: none;
text-transform: capitalize;
}
#masthead {
text-align: right;
background-color: #036;
width: 800px;
}
#navigation {
background-color: #545454;
overflow: hidden;
}
#column_r {
width: 192px;
margin: 0;
float: right;
padding: 4px;
background-color: #a9a9a9;
position: relative;
}
#footer {
width: 800px;
text-align: center;
background-color: #113962;
padding-top: 5px;
padding-bottom: 5px;
}



#column_1 {
width: 180px;
margin-left:0;
float: left;


}
#column_2 {
width: 370px;
margin: 0px;
float: left;
text align:justify;
}
#column_3 {
width: 180px;
margin: 0px;
float: right;

}



/* Styles for Masthead */
#masthead img {
float: left;
}
#masthead p {
font-size: 11px;
color: #fff;
margin: 10px 10px 0;
}
#column_r p {
font-size: 11px;
margin: 7px;
}
/* Styles for Navigation */
#navigation ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
width: 90px;
}
#navigation a {
color: #fff;
text-decoration: none;
display: block;
padding: 5px;
border: 1px solid #c9c9c9;
}
#navigation a:hover {
color: #000;
text-decoration: none;
border: 1px solid #a9a9a9;
background-color: #a9a9a9;
}
/* Styles for Footer */
#footer p {
font-size: 11px;
line-height: 14px;
color: #fff;
margin: 1px;
padding: 1px;
height: 12px;
width: 780px;
}
#footer a {
color: #fff;
text-decoration: underline;
}
#footer a:hover {
color: #fff;
text-decoration: none;
}
/* Styles for Links */
a {
color: #036;
text-decoration: underline;
}
a:hover {
color: #808080;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}

Please any help would be much appreciated.