CSS alignment problem with IE (scroll box -NOT a scrollbar question)

**Just C** · 05-31-2008, 07:10 PM

Hi everyone,
I'm being driven insane by IE (sound familiar?) and am running out of ideas.

DTD XHTML 1.0 Transitional, 2 column CSS
Left column contains an image on each page (sizes vary).
Right column has a headline, a couple of lines text, and then a scroll box for more text.

Everything works beautifully in Firefox (of course). IE, however, moves the scrollbox down the page, for it to be aligned to the bottom of the image used in the left column.
This means the right column will look like: headline, text, blank space as high as picture in left column, scrollbox.

Code:

#col-left {
float: left;
width: auto;
height: auto;
margin-top: 72px;
margin-right: 5px;
margin-left: 3px;
padding: 3px;
background-color: #444446;
border: 2px outset #2655CC;
font-family: "Times New Roman", Ariel, Helvetica, sans-serif;
font-size: 12px;
color: #E0E0E0;
}



#col-right {
padding: 3px;
margin-top: 77px;
margin-left: 320px;
margin-right: 5px;
background-image: none;
background-repeat:no-repeat;
background-color: #444446;
height: auto;
border: 2px outset #2655CC;
font-family: "Times New Roman", Ariel, Helvetica, sans-serif;
font-size: 12px;
color: #E0E0E0;
text-align: left;
}

#scroll {
padding: 3px;
margin-right: 5px;
height: 350px;
width: 400px;
overflow: auto;
border: 2px outset #2655CC;
}

The HTML for that section:

Code:

<div id="col-left">
<img src="image" width="xy" height="xy" />
</div>


<div id="col-right">
<h3>Headline</h3>
<p>
Text text text
</p>
<div id="scroll">
text text text
</div></div>

I'm running out of ideas. As usual, it might well be something blatantly obvious,

but I was up 'til dawn trying to fix this, and right now I'm just

Thanks!