Page Looks Fine In FF. But Sucks Hardcore In IE! Any Ideas Please?

Alrighty. Heres the problem. I have just started playing around with CSS and looking for a way to get my site to look just fine in both major browsers.

I created a layout with a left and right sidebar. as well as a footer and a header.
In firefox the sidebars and central content section appear just fine. But in IE the the central content drops to the bottom of the sidebars.

Please Bear in mind that i have no idea how to fix this or what the issue even is. Its almost driving me insane!!!!!

CSS code is below:

div.container
{
width:90%;
margin:0 auto;
border:1px solid gray;
line-height:150%;
border-right: double #000000;
border-left: double #000000;
border-top: double #000000;
border-bottom: double #000000;
}
div.header
{
height:75px;
background-image:url(images/header.gif);
background-repeat: repeat-x
clear:left;
}
div.footer
{
height:50px;
color:black;
background-image:url(images/footer.gif);
background-repeat: repeat-x
clear:left;
}
h1.header
{
padding:0;
color:blue;
margin:0;
text-align: center;
font-family: sans-serif;
letter-spacing: -3px;
}
h2.footer
{
padding:0;
color:#000000;
margin:0;
text-align: center;
font-size: 80%;
}
h2.title
{
color: purple;
letter-spacing: -3px;
}
div.left
{
float:left;
width:160px;
height:1200px;
margin:0;
padding:1em;
background-color: white;
border-right:1px solid gray;
}
div.right
{
float:right;
width:180px;
height:1200px;
margin:0;
padding:1em;
border-left:1px solid gray;
background-color: white;
}
div.content
{

height:1200px;
width:600px;
margin-left:190px;
margin-right:180px;
padding:1em;
background-color: white;
}
body
{
background-image: 
url('images/bg.gif');
background-repeat: repeat;
}
p.popp
{
width: 200px;
text-align: center;
border-style: groove; #000000
}
ul
{
list-style-type: square;
color: #B22037;
background: #00fff6;
}
a
{
color: #B22037;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
div.background
{
height:250px
width: 95px;
}
div.box
  {
  width: 250px;
  height: 115px;
  background-color: red;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=70);
  /* CSS3 standard */
  opacity:0.7;
  }
div.transbox p
  {
  font-weight: bold;
  color: #000000;
  text-align: center;
  }

Code (markup):

As i am learning still. I got the majority of my info from w3cschools. Although i did add a bit of my own stuff.

Thanks for any help you guys/girls can provide me with,

Regards
DK

 

do you have a live link to provide