I\'m trying to have a fluid input box with 100% width, while having the label floated to the left. Here\'s what I currently have:
.left {
float: left;
}
inpu
See: http://jsfiddle.net/r2769/ (resize the 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>
An explanation of the method is here.
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);
}