question about resizable divs

question about resizable divs

Hello Everyone

This is my code for the resizable div

<div id="slideOptions" style="height:500px;width:300px;top:176px;position:absolute;left:302px;border: medium double black;background-color:white">

<div id="resizeE"> </div>
</div>

The div is empty.The div shows up on the page and I am able to resize it as expected.

Now I added a few text boxes inside it

<div id="slideOptions" style="height:500px;width:300px;top:176px;position:absolute;left:302px;border: medium double black;background-color:white">
<h:inputText id="usernameInput" styleClass="loginInput" size="10" maxlength="10" />
<h:inputText id="usernameInput1" styleClass="loginInput" size="10" maxlength="10" />
<h:inputText id="usernameInput2" styleClass="loginInput" size="10" maxlength="10" />
<h:inputText id="usernameInput3" styleClass="loginInput" size="10" maxlength="10" />
<h:inputText id="usernameInput4" styleClass="loginInput" size="10" maxlength="10" />


<div id="resizeE"> </div>
</div>

Now, the resizable div still works but the text boxes align them selves as I resize the div and when i resize the div to its minimum size , the boxes come out of the div.How can I make them stay inside the div?Ie they should not realign and they should disapper as the size of the containing div becomes smaller.

Thanks in advance!