Indefinite Width Label and 100% Width Textbox on the Same Line?
I have a <label> and an <input> on the same line. The contents of the label is dynamic (via PHP) so the label cannot have a fixed width. The input to the right of it needs to fill the remaining horizontal space on the line they are on together. However, simply adding width:100% to the input forces it to the next line. Is there any way to have them both remain on the same line and have the input take up all the room leftover from the label?
I have tried a few things but nothing seems to work. I have also done lots of searching but I can't seem to find any solutions to this problem.
I have considered the possibility of putting the label and input in a small table. I tried it and it does work how I want but I know that is improper use of tables so I would rather not use that. I also tried display:table-cell which also works but as most people are aware, that is not a very cross-browser friendly solution.
Any help would be greatly appreciated. Thanks!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
<label id="Name" for="Name">NAME:</label>
<input type="text" maxlength="30" name="Name"/>
The problem with that is you're using specific widths. My label cannot have a specific width. It will be as wide as the text inside it. And the text is dynamic (as I explained in my first post) so I can't set it to a specific width. Also, the input needs to take up the rest of the space (100%).
Thanks for the effort though.
Here is the deal you have wrapper or container around this form
you have total of 100% inside
now you can assign percentage to label and input instead of fixed width
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread