CSS 3 column content dropping error ie6

i have never done a css fluid website before and because of this i have encountered problems which i cant resolve.

Problem is that on http://sellitswapit.com/ when viewed in ie6 browser (less than 1024 pixels width) the content of the middle column drops to the height/level of where right column ends.

if any one has any idea of why this is occuring please let me know, as I have racked my brains and cant work it out.

any suggestions appreciated.

thanks
nic

Since I'm on a Mac it's a little harder for me to troubleshoot code on IE. But at first glance I'd say the method you are using—floating the left and right columns, not floating the middle and giving it full remaining width—can be very tricky to pull off cross-browser.

What I would do is use absolute positioning…absolutely position the left and right columns to each side; position the center column in the middle and give it enough margin to clear them.

Having said that, though, it looks like the reason things are dropping is because of the container holding the featured ads in place (#featured_contents). The images have more space in between than in other browsers. The first thing I would try is adding this:

.sample_product {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
width: 120px;
height:140px;
padding: 9px;
float: left;
margin-right: 3px;
margin-left: 3px;
color: #0B74F4;

/* IE 6 */
display: inline-block;
}

If that doesn't do it then at least you know where the trouble is coming from. :)