3

I have a div called wrapper. It is centered horizontally using the margin property. The width of that wrapper is fixed.Inside that wrapper I have an a tag followed by an input field. What I am looking for is to have the width of the input field auto adjusting to the remaining width on the right (until the border of wrapper). I would like to avoid defining the width in pixels. I tried few thing but nothing is working (width auto or 100% for instance). Hope to be clear and hope someone can help.

FIDDLE: http://jsfiddle.net/72sPT/

HTML:

<div id="wrapper">
   <a>this is a button</a>
   <input type="text"/>
</div>​

CSS:

#wrapper {
    width: 600px;
    margin: 10px auto;
    background: blue;
}

​

gnclmorais
  • 4,897
  • 5
  • 30
  • 41
Marc
  • 9,217
  • 21
  • 67
  • 90
  • Sorry check it here http://jsfiddle.net/72sPT/2/ – Tkingovr Dec 01 '12 at 10:35
  • the think is that i want the width to take automatically the entire remaining space on the right side. And with your solution if I put 100% there is a line break and the input field is placed on the next line... – Marc Dec 01 '12 at 10:38
  • Try it on an html document I think the line break happens because of the limited space in jsfiddle. – Tkingovr Dec 01 '12 at 10:41
  • See my answer here regarding flex and flex-grow: https://stackoverflow.com/a/52975265/1599699 – Andrew Oct 24 '18 at 17:57

2 Answers2

9

If you wrap the input tag in another div, you can do:

#wrapper {
    width: 600px;
    margin: 10px auto;
    background: blue;
}
#wrapper a {
    float: left;
}
#wrapper div {
    overflow: hidden;
}
#wrapper input {
    width: 100%;
}
Kenneth Cheng
  • 446
  • 4
  • 7
  • Hello Kenneth. thank you. Your proposition is working. Strange thing is that when setting the width to 100% there is an overflow. The right border of the input is hidden. To avoid that I have to set it at 99%. But that is fine with me. Thanks again :) – Marc Dec 01 '12 at 10:44
  • @Marc, that's because of the box model/sizing used (where width does not include padding and border). You could set `box-sizing: border-box` to include those and get a fitting input when `width: 100%`. – Qtax Aug 21 '13 at 17:14
-1

If you are looking to not mess with your <a> tag, then you can float your input to the right:

jsFiddle

#wrapper {
width:600px;
margin:10px auto;
background:blue;
}

#wrapper input {
 float:right;
width:70%;    
}
JofryHS
  • 5,804
  • 2
  • 32
  • 39
  • hello jofry. thanks for tryig to help but again, as I said, I was looking for the input field to adjust to the total remaining space. Not just a part of it... Thanks anyway – Marc Dec 01 '12 at 10:47