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 can I make an image continue across multiple sections with breaks in between?

    Why won't my background show within div container?

    How to add CSS files for different platform devices? [closed]

    How to make nested divs appear as siblings with CSS?

    How can I generate a random color with Stylus CSS?

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    OOCSS & BEM - inline list - How to handle scaffolding, how to add skin?

    CSS How to keep page centered, but still put stuff where I want

    How to work with dynamic container in Isotope?

    How to change label color of disabled checkbox in ASP.NET?

    How to zoom into a specific location of an image using CSS

    How to make a background with 2 gradients in CSS

    How to prevent exceeding the parent's boundary?

    How to call static block with styles.css

    how to accomplish this border effect in css?

    PHP Show Hidden Div

    How to Make Tabs In CSS?

    How to style