multiple column issues - especially IE6 :(

Columns wont get aligned verticaly

[csslearner18]

Hi,
I just checked a site I am working on using adobebrowserlab for cross browser check.

When I create two columns, both with float left, the right column slightly lower than the left column.

In IE6, the right column appears nearly bottom...

Please give me an advice on this!


here's my code

div#main-content {
margin: 0 auto;
width: 800px;
}

div#main-content div#left-nav {
float: left;
width: 220px;
margin-top: 3px;
}
div#main-content div#left-nav ul#nav {
list-style: none;
display: block;
width: 113px;
height: 15px;
float: left;
color:#4b4736;
text-decoration: none;
font-weight: bold;
}
div#main-content div#left-nav ul#nav li {
color:#4b4736;
font-weight: bold;
display: block;
width: 113px;
height: 15px;
float: left;
text-decoration: none;
/*

margin: 4px 0px;
}
*/
}
div#main-content div#left-nav ul#nav li a {
color: #4b4736;
text-decoration: none;
font-weight: bold;
display: block;
width: 113px;
height: 15px;
float: left;
}

div#main-content div#left-nav ul#nav div#home {
margin: 1px 5px 0px 5px;
padding: 0px 27px 0px 27px;
letter-spacing: -0.4px;
color: #b1a10e;
}
div#main-content div#left-nav ul#nav div#products {
margin: 10px 5px 15px 5px;
padding: 0px 27px 0px 27px;
}
div#main-content div#left-nav ul#nav a div#contact {
margin: 42px 5px 10px 5px;
padding: 0px 27px 0px 27px;
}


div#main-content div#right-col {
float: left;
width: 565px;
margin: 0px 0px 0px 235px;
}

[alias]

Hi, please include a sample HTML snippet.

[csslearner18]

Hi,
I've sorted out the above float, but another div float I'm attemptting won't get aligned in only IE6 & 7.
I want to put text address (#address) about 245px away from the left and languages bar on the right
(#languages) within div#top (800px width).
The languages div contains 2 x texts (ENG and RUS) and the both country's flaf images.

In both IE6& 7, the address text goes to the right above the languages bar.

Would be great if I could get help on this!

==CSS==
div#page-wrap {
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;
}
div#top {
height: 65px;
margin: 0 auto;
padding-top:118px;
}

div#top div#address {
float: left;
width: 260px;
color:#ffffff;
text-align:left;
margin: 0 0 0 230px;
}* html #div#top div#address { display:inline; }
* html div#address { display:inline; }

div#top div#languages {
float:right;
width:170px;
height:20px;
/*position:relative;*/

}* html div#top div#languages { display:inline; }
* html div#languages { display:inline; }

div#top div#languages div.eachlanguage {
float:left;
width: 170px;
margin-left:auto;
margin-right:auto;
}

div#top div#languages div.eachlanguage img {
float: right;
display:inline;
padding: 0px 5px;
}


div#top div#languages div.eachlanguage img a {
float:left;
display:block;
border: 1px solid #d1d1b5;
}


div#top div#languages div.eachlanguage p{
float:right;
padding: 3px 5px 0px 5px;
}

div#top div#languages div.eachlanguage span {
letter-spacing: 1px;
color: #b1a000;
text-transform:uppercase;
font-size: 0.8em;
font-weight: bold;
}


div#top div#languages div.eachlanguage a {
color: #ffffff;
font-size:0.8em;
display: inline;
font-weight: bold;
}

div#top div#languages div.eachlanguage a:hover {
color:#b1a000;
}

==HTML==
<div id="top">
<div id="address"><h4>Tel: [phone] Fax: [phone]</h4></div>

<div id="languages">
<div class="eachlanguage">
<a href="#"><img border="0" alt="" src="http://www.ayakolay.co.uk/miltongrange/images/russian.jpg"/ ></a>
<p><a href="#">rus</a></p>
<img border="0" alt="" src="http://www.ayakolay.co.uk/miltongrange/images/english.jpg"/ >
<p><span>eng</span></p>
</div>
</div><!-- END languages -->
</div><!-- END top -->