2 Column CSS and Column 2 Drops down half the page in IE6

[Minxy]

Im currently working on a community website which up until yesterday was working fine.

Now I'm finding out in IE6 the vertical alignment of column 2 (content) drops down to the middle of the page rather than staying at the top. It appears to be working fine in IE7 for some reason.

http://www.mountisacommunityhelicopter.com.au

To be fair a lot of this is cut and paste code as I'm still learning and dont have a great deal of experience in this. So any help would be greatly appreciated.


body {
margin: 0;
padding: 0;
background: #E5E5E5;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}

blockquote {
font-style: italic;
}

a {
color: #135293;
}

a:hover {
text-decoration: none;
}

.title1 {
margin: 0;
padding: 10px 0;
background: url(images/img07.gif) repeat-x left bottom;
font-weight: normal;
font-size: 129%;
color: #FFFFFF;
}

.title2 {
margin: 0;
padding: 10px 0;
background: url(images/img09.gif) repeat-x left bottom;
font-size: 227%;
font-weight: normal;
color: #135293;
}

.title3 {
margin: 0;
padding: 10px 0;
background: url(images/img11.gif) repeat-x left bottom;
font-size: 129%;
font-weight: normal;
color: #FFFFFF;
}

.boxed {
padding: 5px 30px 20px 30px;
}

.boxed p, .boxed ul, .boxed ol {
line-height: 180%;
}

.orange {
margin: 20px 30px;
background: #FF9523 url(images/img10.gif) repeat-x;
color: #FFFFFF;
}

.orange a {
color: #FFFFFF;
}

.col-one {
float: left;
width: 300px;
}

.col-two {
float: right;
width: 300px;
}

/* Page */

#page {
width: 980px;
margin: 0 auto;
background: #FFFFFF url(images/img01.gif) repeat-y;
}

/* Sidebar */

#sidebar {
float: left;
width: 240px;
}

/* Logo */

#logo {
height: 220px;
background: #FFFFFF url(images/img02.gif) repeat-y right top;
}

#logo h1, #logo h2 {
margin: 0;
text-transform: lowercase;
text-align: center;
font-weight: normal;
font-style: italic;
color: #9C9C9C;
}

#logo h1 {
padding: 100px 0 0 0;
background: url(images/img03.gif) no-repeat center center;
font-size: 36px;
}

#logo h2 {
font-size: 14px;
}

#logo a {
color: #009900;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}

/* Menu */

#menu {
padding: 20px;
background: #85C329 url(images/img04.gif) repeat-x;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
padding: 10px 0;
background: url(images/img05.gif) repeat-x;
}

#menu li.first {
background: none;
}

#menu a {
text-decoration: none;
font-size: 129%;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: underline;
}

/* Login */

#login {
padding: 20px;
background: url(images/img06.gif) repeat-x;
}

#login form {
margin: 0;
padding: 20px 0 0 0;
}

#login fieldset {
margin: 0;
padding: 0;
border: none;
}

#login label {
color: #FFFFFF;
}

#inputtext1, #inputtext2 {
width: 194px;
margin-bottom: .5em;
font: bold 100% Georgia, "Times New Roman", Times, serif;
color: #666666;
}

#inputsubmit1 {
margin-bottom: .5em;
font: bold 100% Georgia, "Times New Roman", Times, serif;
color: #666666;
}

#login a {
color: #FFFFFF;
}

/* Content */

#content {
float: right;
width: 740px;
}

/* Footer */

#footer {
width: 980px;
height: 120px;
margin: 0 auto;
background: url(images/img12.gif) repeat-x;
}

#footer p {
margin: 0;
font-size: 85%;
}

#links {
float: left;
width: 220px;
height: 45px;
padding: 35px 0 0 20px;
background: url(images/img13.gif) repeat-x;
}

#links a {
color: #FFFFFF;
}

#legal {
float: right;
width: 720px;
height: 45px;
padding: 35px 0 0 20px;
}

many thanks again for any help.

[jlhaslip]

There might be an easier way to do this, but this fixes the problem nicely in my local machine.
IE Conditional Comments can be used to serve a different style rule to IE Browsers. There are several variations, but use this one to target IE6 and lower.

<style type="text/css">
<!--
.style2 {font-size: 14px}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
#sidebar {
width: 236px;
}
</style>
<![endif]-->

</head><body>I think the width of the sidebar was the culprit.

In future, please use the bbcode "code" tag to separate out your code from the posting. It automagically shortens the listing for you (and us). Thanks.

[Minxy]

Thank you very much for your assistance. I shall try that tomorrow :)

And my apologies .. I didnt think ahead of content display :o