Input box 100% wide, with a label on the left

Question

I am trying to create a fluid input block with 100% width and the shortcut to the left. Here is what I have now:

.left { float: left; } input { width: 100%; } <form> <label class="left">Name:</label> <input class="left" id="name" name="name"/> <div class="clear"></div> </form> 

This works, however it falls below the mark. If I use the parent div to assign a float, then it will not be 100%. Any ideas?

Thanks!

Answer 1

See: http://jsfiddle.net/r2769/ (resize window)

CSS

 .left { float: left; } .left2 { overflow: hidden; display: block; padding: 0 4px 0 10px } .left2 input { width: 100% } 

HTML:

 <form> <label class="left" for="name">Name:</label> <span class="left2"><input id="name" name="name" /></span> </form> 

Method explanation here .

Answer 2

I recently found out about calc in css:

 width: calc(100% - 100px); 

this can be used to solve this problem: jsfiddle here

HTML:

 <div class="setting"> label <input class="s2"/> </div> 

CSS

 .setting { position: relative; width: 100%; } .setting .s2 { position: absolute; left: 180px; width: calc(100% - 184px); }