position:relative conflict with overflow:auto

Hello and Good Day to you all.

I am having a bit of a problem, I have just finished validating my main page in html and css and both passed now when i try to put the css image at the bottom of my page a strange error occurs. I have all of the text inside an overflow:auto container, when i attempt to put the following code inside the html page within this conatiner, a horizontal scrollbar appears for some reason:


<div style="position:relative;top:150px;left:150px;">
<p>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!">
</a>
</p>
</div>


i added the div style="position:relative;top:150px;left:150px;". The image gets positioned correctly only thing is, I get a horizontal scrollbar, I chose to use position:relative because it is inside an overflow:auto container

here is the CSS for my conatiner:

.box {
position:absolute;
left:330px;
top:180px;
width: 600px;
height: 360px;
border-style: double;
border-color: #990000;
background-color: #ffffff;
border-width: 4px;
overflow: auto;
padding:10px;
}


Any help or suggestions are appreciated, I thank you for your time.

Why not use top and left margins instead?

oh yeah, heheh. Good call. Thanks alot Aerospace. I appreciate your help. I guess position:relative not only moves the text or object but also the invisible margin for the specified lines? So then the document acquires the largest margin found on the page, hence the horizontal scrollbar? .. or somethin like that, lol?

No, position:relative will leave the existing space that div took up plus the new space of the div. Its only good to use when you are maybe moving something over 1 or 2px but anything greater will get you into trouble.

cool thanks, thats kind of what I was trying to say, I just did not know how to explain it well. Thanks again.