Fixed position within div, allowing rest of content to scroll

Hi,

I have a div that is not at the top of the page. Inside that, I have another div that I need positioned at the top of the parent div so that when the screen is scrolled down, the text box stays at the top of the div and the other content scrolls.

<style>
.outer
{
	position:relative;
	width: 900px;
	height: 500px;
  	border-style: solid;
        border-width: 5px;
}

.inner
{
	position:fixed;
}

</style>

<br><br><br><br><br><br><br><br><br><br><br><br>
<div class="outer">
	<div class="inner"><input type="text"></div>
	<br>
	other
	<br>
	content
	<br>
	goes
	<br>
	here
</div>

Select allOpen in new window

If I add    top:0  to the "inner" div, the text box is pinned to the top of the page which is not what I need.

Can someone please help?!

Thanks in advance