Caja de entrada 100% ancho, con la etiqueta a la izquierda

Question

Estoy tratando de tener una caja de entrada fluida con un ancho del 100%, mientras que la etiqueta flota a la izquierda. Esto es lo que tengo actualmente:

.left { 
    float: left; 
} 

input { 
    width: 100%; 
} 

<form> 
    <label class="left">Name:</label> 
    <input class="left" id="name" name="name"/> 
    <div class="clear"></div> 
</form> 

Esto funciona, sin embargo, aparece debajo de la etiqueta. Si uso un div principal para asignar los flotantes, entonces no abarca el 100%. ¿Algunas ideas?

¡Gracias!

Answer 1

Ver:http://jsfiddle.net/r2769/(cambiar el tamaño de la ventana)

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> 

Una explicación del método is here.

Answer 2

Hace poco se enteraron de Calc en css:

width: calc(100% - 100px); 

esto se puede utilizar para resolver este problema: 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); 
}