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;
}
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 drops down below the label. If I use a parent div to assign the floats, then it doesn't span 100%. Any ideas?
Thank you!
Using float and overflow attributes: Make a label and style it with float attribute. Now set the label float(position) left or right according to your requirement. This will align your label accordingly. Overflow property for input is used here to clip the overflow part and show the rest.
Remember to add an id to the input and matching for attribute to the label. Without styling, the label will appear above the input. Adding an absolute position to the label will make it appear to be inside the input field. Adding position: relative to the container will keep the label inside and not outside.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With