css: let input field fill the space left

Question

I'm trying to let a label and an input field fill the whole width of a from. Here is my attempt. This is the HTML

<form>
    <p>
        <label>Username:</label>
        <input/>
    </p>
</form>

and CSS

form {
    widht: 400px height: 500px;
    background-color: lightgrey;
}
label {
    float: left;
}
input {
    width: 100%;
    box-sizing: border-box;
}

When I put a with: 100% in the input field it moves below the label and without the width it is too small. Any suggestions ?

possible duplicate of Style input element to fill remaining width of its container — user247702
– user247702, Commented Sep 26, 2013 at 8:16

Mr. Alien · Accepted Answer · 2013-09-26 08:16:42Z

2

Use a wrapper element around your input and set overflow: hidden; (Make sure you use a block level element, if you are using span than declare display: block; in your CSS)

Demo

<label>Blah Blah</label>
<div><input type="text" /></div>

label {
    float: left;
}
div {
    overflow: hidden;
}

input[type=text] {
    width: 100%;
}

answered Sep 26, 2013 at 8:16

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NaYaN · Accepted Answer · 2013-09-26 08:22:19Z

1

you have to set width attribute properly.

Live Demo

label {
    float: left;
    width: 15%;
}
input {
    width: 83%;
    box-sizing: border-box;
}

answered Sep 26, 2013 at 8:22

NaYaN

1,3207 silver badges11 bronze badges

2 Comments

Mr. Alien Over a year ago

Minimize the fiddle window :)

NaYaN Over a year ago

on that case, you have to make it responsive.

user1860859 · Accepted Answer · 2013-09-26 09:19:56Z

0

If you firebug it, you will know that Your border is actually putting some padding to the container p. So, if you just put border to none then you will be good to do. If you want to use border and dont want the input to go outside the form, then you need to either shorten the width of the input a little and apply border or you give some padding to your form.

Try This CSS

form {
 background-color: #D3D3D3;
 height: 500px;
 width: 400px;
}
form p{
 float: left;
 position: relative;
 width: 100%;
}
label {
 float: left;
 position: relative;
 width: 100%;
}
input {
 border:0;
 float: left;
 height: 20px;
 margin: 0 auto;
 padding: 0;
 position: relative;
 width: 100%;
}

Here is the DEMO

answered Sep 26, 2013 at 9:19

user1860859

Collectives™ on Stack Overflow

css: let input field fill the space left

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related