CODEWITHSUNDEEP
css
dzm
dzm

Reputation: 23544

Input box 100% width, with label to the left

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!

Upvotes: 8

Views: 12512

Answers (2)

thirtydot
thirtydot

Reputation: 228182

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.

Upvotes: 23

jvilhena
jvilhena

Reputation: 1131

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);
}

Upvotes: 3

Related Questions