www.webdeveloper.com
Results 1 to 4 of 4

Thread: Indefinite Width Label and 100% Width Textbox on the Same Line?

Hybrid View

  1. #1
    Join Date
    Feb 2003
    Location
    Aberdeen, Washington, USA
    Posts
    1,859

    Question 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.

    I suppose another possibility would be to dynamically get the width of the label via JavaScript and then add a negative left margin to the input with that but I'd really rather not rely on JavaScript for this.

    Any help would be greatly appreciated. Thanks!

  2. #2
    HTML Code:
    <!DOCTYPE html>
    
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>Test</title>
    	
    	<style type="text/css" media="screen">
    		label {
    			float:left;
    			font-size:10px;
    			margin-right:15px;
    			padding-top:5px;
    			text-align:right;
    			width:100px;
    		}
    		input {
    			background:#EEEEEE;
    			border:0 none;
    			display:block;
    			height:15px;
    			padding:5px 0;
    			width:414px;
    		}
    		
    	</style>
    	
    </head>
    
    <body>
    	
    
    	<p>
    	  <label  id="Name" for="Name">NAME:</label>
    	  <input type="text"  maxlength="30" name="Name"/>
    	</p>
    
    </body>
    </html>

  3. #3
    Join Date
    Feb 2003
    Location
    Aberdeen, Washington, USA
    Posts
    1,859
    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.

  4. #4
    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
    Code:
    		label {
    			float:left;
    			font-size:10px;
    			margin-right:15px;
    			padding-top:5px;
    			text-align:right;
    			width:40%;
    		}
    		input {
    			background:#EEEEEE;
    			border:0 none;
    			display:block;
    			height:15px;
    			padding:5px 0;
    			width:50%;
    		}

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles