second column in ie drops down regardless of size!

[adover]

hey all,
I've got a page design with all the code below set out. For some reason, regardless of the second columns size, be it 30 pixels less than needed to fit or whatever, still seems to drop below the primary content column... muchly confusing as you may well understand, I've checked everything I can think of, apart from maybe moving the code about somewhat! anyt ideas? thanx in advance!!

/* CSS Document */
 
* {
 margin: 0;
 padding: 0;
}
.top {
	font-size: 11px;
	color: #CCCCCC;
}
body {
	text-align: center;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	background-attachment: fixed;
	background-color: #009CE8;
	background-image: url(images/bg.gif);
	background-repeat: repeat-x;
}
a:link, a:visited {
 color: #006699;
}
a:hover {
	color: #FFFFFF;
	background-color: #006699;
}
 
h1 {
	margin-bottom: 11px;
	margin-left: -108px;
	padding: 15px 0 21px 108px;
	color: #006699;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-style: normal;
	line-height: 1px;
	font-weight: bold;
	font-variant: normal;
	text-transform: capitalize;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
}
h2, h3{
 font-weight: normal;
 font-size: 1em;
 line-height: 18px;
}
h2 {
	padding-top: 10px;
	padding-bottom: 20px;
	font-size: 1.25em;
	text-transform: capitalize;
	color: #99CC00;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1px;
}
h3 {
	padding-bottom: 6px;
	font-weight: bold;
	color: #006699;
	line-height: 0.5em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #003D59;
} 
 
#page {
	margin: 0 auto;
	width: 763px;
	text-align: left;
	background: #fff url(images/pagebg.gif);
	border-right-width: 4px;
	border-left-width: 4px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #006699;
	border-left-color: #006699;
}
#header {
	height: 140px;
	background-image:url(images/copllage1.jpg);
	background-color: #0069B7;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #99CC00;
}
 
#header p {
 
 float: left;
 padding: 24px 24px 24px 24px;
 font-size: 1.5em;
 line-height: 1em;
 color: #000000;
}
 
#header ul {
 padding-top: 114px;
 padding-right: 12px;
 text-align: right;
 list-style: none;
}
#header li {
 display: inline;
 margin: 0 8px;
}
#header li a {
	padding: 6px 9px 6px 9px;
	font-size: 11px;
	line-height: 1em;
	text-decoration: none;
	color: #ffffff;
	background-color:#0B119B;
	border: 2px solid #FFFFFF;
	font-weight:bold;
}
#header li a:hover {
 color: #0B119B; 
 border: 2px solid #0B119B;
 background-color:#ffffff;
 }
 
 
#content-primary {
 margin: 12px 24px 60px 24px;
 width: 460px; 
 float: right;
}
 
#content-primary ul {
 padding-bottom: 18px;
 padding-left: 50px;
}
 
#content-primary p {
 padding-bottom: 18px;
 padding-left: 50px;
}
#content-primary img {
 float: left;
 padding: 3px;
 border: 3px solid #eee;
 background: #fff;
 margin: -6px 18px 0 -114px; 
} 
#content-primary ul {
 
 list-style-image:url(images/bullet_.gif);
 }
 
#content-secondary {
 float: right;
margin: 24px 24px 60px 24px; 
 width: 200px;
 font-size: 11px;
 color: #300;
}
#content-secondary p {
 padding-bottom: 18px;
}
#footer {
	clear: right;
	height: 150px;
	font-size: 10px;
	line-height: 1em;
	color: #fff;
		background-color: #003866;
		background-image:url(images/footer.jpg)
}
#footer a:link, #footer a:visited {
 color: #c99;
}     
 
#footer p {
 padding: 72px 24px 24px 24px;
} 
#footer ul {
 margin: 0;
 padding: 0;
}
#footer li {
 display: inline;
}
 
.clear {
 clear: both;
}
 
.container {
padding: 10px 10px 10px 10px;
	background-color: #ECF9FF;
	border: 2px solid #006699;
	margin-bottom: 10px;
}
.container ul {
padding-left:20px;
 list-style-image:url(images/bullet_.gif);
 }
 
.date {
	color: #FF9900;
	font-weight: lighter;
	font-size: 11px;
}
 
.roundtop { 
	background: url(images/t2.gif) no-repeat top right; 
}
 
.roundbottom {
	background: url(images/b2.gif) no-repeat top right; 
}
 
img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block;
}

and the HTML

<!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; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="page">
  <div id="header">
  <ul>
      <li class="selected"><a href="index.html">Home</a></li>
      <li> <a href="about.html">About us</a></li>
      <li> <a href="services.html">Services</a></li>
      <li> <a href="products.html">Products</a></li>
      <li> <a href="faq.html">FAQ</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="recruitment.html">Recruitment</a></li>
      <li> <a href="contact.html">Contact us</a></li>
    </ul>
  
  </div>
  
  <div id="content-primary">
    <h1>Products</h1>
    <p>&nbsp;</p>
  </div>
  <div id="content-secondary"> 
    <div class="container">
      <h3>Featured Product </h3>
      <p>&nbsp;</p>
    </div>
    <div class="container">
      <h3>Featured Product </h3>
      <p>&nbsp;</p>
    </div>
    <div class="container">
      <h3>Special Offers </h3>
      <p>&nbsp;</p>
    </div>
    <p>&nbsp;</p>
  </div>
  <div id="footer">
    <p>&copy; 2007 Helping Hands DCS Ltd. All rights reserved</p>
</div>
</div>
</body>
</html>

[Faliol]

I think its because you have both of the columns set to float right....set one to float: left; and the other one to float: left; depending on which one you want left or right.

#content-primary {
 margin: 12px 24px 60px 24px;
 width: 460px;
 float: right;
} 

#content-secondary {
 float: left;
margin: 24px 24px 60px 24px;
 width: 200px;
 font-size: 11px;
 color: #300;
}

[Faliol]

dont forget to add display: inline; to them to fix Explorer's double margin bug on floats....

[Paul O'B]

Hii,

As faliol said it's the double margin bug on the size of a float that touches the containers edge that is causing the problem. The display:inline fix will cure it (see the faq on floats for more info).

#content-primary {
 margin: 12px 24px 60px 24px;
 width: 460px;
 float: right;
    display:inline;
}