How do I make an input box resize to the size of it's parent? 1

[FancyPrairie]

My question is a little misleading. What I want to do is to place a label within a div tag. The width of the label will automatically size so that all of the text can be read. I want to place an input box immediately to the right of the label. Now, as I resize the div tag I want the input box to grow/shrink with the div tag. This is what I have so far. However, if I increase the width of the div tag, the width of the input box does not increase.

<div style="position: absolute">
<label style="float:left">My Label</label>
<input style="float:left"/>
</div>

 

[vacunita]

How are you resizing the div?

This seems to work for me:

<div style="position: absolute; width:500px;">
   <label style="float:left">My Label</label>
   <input style="float:left; width:80%;"/>
</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[FancyPrairie]

That doesn't work quite like I want. The following is more like I want but still doesn't quite get there. For if, via Visual Studio or Visual Web Develop 2008 Expess Edition, I decrease the size of the div tag both the label and input box change size also. Which is fine, except the input box moves to the left covering the label. I want the left postion of the input box to remain stationary (just to the right of the label)

<div id="div1" style=" white-space: nowrap; width: 434px; height: 20px;">


	<label id="lbl1" style=" float: left;  width: 20%;  " for="firstname" accesskey="f">First name:</label> 
		<input style=" float: left; width: 80%" 
        type="text" id="firstname" name="firstname" tabindex="1" value="" 
        title="first name"/>

</div>

 

[vacunita]

Loose the floats. labels and input boxes are already inline elements, so they don't need to be floated.

With that done, remove the width for the label, and then just add a percentage width to the input box.

<div id="div1" style=" white-space: nowrap; width: 234px; height: 20px; background-color:#666666;">


    <label id="lbl1" style="" for="firstname" accesskey="f">First name:</label>
        <input style="width: 80%"
        type="text" id="firstname" name="firstname" tabindex="1" value=""
        title="first name"/>

</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[FancyPrairie]

Your code does work. It appears to be a problem with Visual Web Developer 2008 Express Edition. For, when I try your code in Microsoft Visual Studio 2005, it works...up to a point. So I'm assuming a quirk with VS 2005.

Thanks for your time

 

[vacunita]

Yea, I would assume Visual Studios rendering engine may have some issues there. but it should work under normal circumstances, i.e. Web Browser.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/