CSS : How to have an input field auto adjusting its width


Tags: css

Problem :

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



Solution :

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

    CSS Howto..

    How achieve rounded shadow behide a rounded element using css3

    How can I make a DIV cursor and background color change if I hover over it?

    How to target flex item by its order number?

    how to put 6 divs in the same line?

    Don't understand how to control css elements with jQuery css

    How to change CSS in media tag within @media only tags with jquery?

    how to get parameter orignal value by receiving it in function

    how to change the CSS Class of the asp label dynamically based on its value

    How to apply a CSS class on hover to dynamically generated submit buttons?

    How to place content below a fixed image?

    How to make a div fill up remaining horizontal space

    Why are items showing up in my instead of [closed]

    How can I place an element at the top of a page using CSS?

    How to make Instagram.js feed responsive in Bootstrap?

    How to give a div full height in CSS

    How to make top/bottom borders appear ontop of left/right borders crossbrowser css

    CSS transition: how to produce this effect (linking transitions)

    How to create a modal popup using javascript and CSS

    how to convert inline CSS into external CSS?

    How do you center a line-wrapped

    How can I take advantage of Sass, for example, in rendering FizzBuzz?

    CSS how to fill remaining space (1 div with smaller divs)

    CSS - How to center an image without class or id?

    How do I expand this CSS list?

    server-side control - how set background with css ? (link & hover)

    How to get element position relative to parent?

    How do I center a menu option under it's heading option in a drop down menu?

    Why does this qtip2 show blank content on 2nd click?

    How to create new
  • not affected by SOME css styles
  • How to show transition of an element that is expanding over nearby content?