IE column dropdown - or overlay Options

[kjetil]

Hi
I have a three column setup where the left column causes different problems - but only in Explorer (also in 7):
Its a fixed width page with the right column floating to the right of a main container. In the main container I first have a main image (in its own div) and then the left column floated down left of the main text.

Have a look at for instance http://www.dolcevita.no/italia/liguria/cin...erre/index.html
(The site's front page is built on an other template)

Now,
in Exploder (!), with the main container width set to 610 px (which should be perfect), the main text drops down below the left column (while it should flow down the right side and then in below the left side images).
- I've tried to reduce the width of the main container, and then the text comes up - but covers the right column instead.
- Setting a leftside margin solves the problem on this page - but ruins those pages with no (or just a few) images in the left column.
- I have also tried to add an additional container outside the main content container - with the main image first, and then the main container. The idea was to get the floated left column in the top of a container. Makes no difference.

Any hint would be very much appreciated!

Thanks,
Kjetil Flekkoy
Norwegian in Toscana

PS The CSS file is here: http://www.dolcevita.no/css.css
The template which the pages build on is here: http://www.dolcevita.no/Templates/mal2.dwt
And the most crucial CSS - I believe - is here:

/***** Outside container with red border */
#altinnhold {
margin: 5px auto;
padding: 0px 10px;
border: 1px solid #CE4428;
background: #FFFFFF;
height: auto;
width: 930px;
}
/***** Right column-container */
#hstolpecont {
width: 270px;
float: right;
padding: 0px;
margin-right: 20px;
}
/***** main content container - including main/top image, left column and main text */
#hovedoppslag {
margin: 0px 10px 0px 20px;
padding: 0px;
width: 610px;
position: relative;
}
/***** Left column */
#vstolpe {
font-size: 90%;
text-align: left;
width: 260px;
float: left;
}
#vstolpe img {
margin: 2px 0px 5px 0px;
padding: 0px;
border: thin outset #DCDCDC;
}
/*** Main text */
#hovedtekst {
background-color: #FFFFFF;
width: 610px;
margin: 0px;
padding: 0px;
font-weight: normal;
}
#hovedtekst p {
line-height: 140%;
margin: 0px;
padding-top: 4px;
padding-bottom: 0px;
}

[Darin McGrew]

I recommend that you start by fixing the markup errors reported by our online validator. Most are caused by your mixing HTML into an XHTML document, but some are structural.

Other than that, it seems you may be cutting it too close with the widths of various element. A browser adding an extra pixel or three may throw off the layout.

FWIW, I also recommend that you not use a font size less than 100% except for legalese and similar fine print, and that you not use a fixed-width layout.