CSS- background color doesn't fill to top of scrolling div

Question

I have a div (sub area of page with scroll bar) that has some text, an image and a table. The background color defined for the div -

<div style="background-color: white">

does not fill the area to the top, the top arrow of the scroll bar is above the area filled with the background color (by about the width of one line). Adding a br at the top fixes it, but moves stuff too far down.

I read two potential solutions. One suggested I set a fixed height for the div. That would require changing the height by trial-and-error every time I changed the content of the page. Next. The other suggestion said to add this at the end, just before the /div -

</div>
<div class="clear"></div>
</div>

but that has no effect.

There are several different pages that get loaded into the scrolling area, using SSI's, and some of those included pages use divs, and some of those are floats and some absolutes.

Thanks for any help.

EDIT

Adding the following, which I didn't realize was needed with the "clear", still doesn't work

<style type="text/css">
.clear {
clear:both;
height:1px;
overflow:hidden;}
</style>

Ad

Answer 1

I just wrote this up and it seems to keep the background color no matter how much content you put in it...

<div style='background:#abc;overflow:auto;'>
    <p>a bunch of content goes here</p>
</div>

you can, of course, set a height to that but more likely it would be in some div wrapper...