Jump to content

Can Input field fill remaining width?

Recommended Posts


  I am attempting to create a form control with an input field in the centre, and plus/minus buttons either side. The buttons have an absolute position set so they remain at either edge of the parent container, with the input (ideally) adjusting in with to make up the remaining width. Only in practice it doesn't. I can't really set a width to the input as it needs to adjust the width to for different screen widths. The code: 


.responsive-container{position: relative; width: 100%;}

.minus-button{position: absolute; left: 0; width: 40px;}

input{position: absolute; left: 40px; right: 40px; width: auto;}

.plus-button{position: absolute; right: 0; width: 40px;}
<div class="responsive-container">
	<a class="minus-button">-</a>
	<a class="plus-button">+</a>


Hopefully you can see what I am trying to achieve here. If I set the input to 100% width, it goes beyond the container because it has been budged by 40px. Setting it's width to auto doesn't seem to fill the space correctly. Any pointers here appreciated!

Share this post

Link to post
Share on other sites

You should never consider using position: absolute; it removes these elements from flow of the remaining elements, and usually causes more issues later on.

The 3px padding and negative 3px margin are the same as the border width + padding of the input element. By using width: 100% these property sizes are added as a addition to 100& width, causing scrollbars to appear. The same size negative margin counteracts this increased width.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...