Question

i have this example: http://jsfiddle.net/DRW2S/

#con{
    width:auto;
    background-color:red;
}
#inp{
    width:auto;
    max-width:525px;
    height:26px;
    float:right;
}
#btn{
    float:right;
    width:30px;
    background-color:yellow;
}

<div id="con">
    <input type="text" id="inp" />
    <div id="btn"> hi </div>
    <div style="clear:both;"></div>
</div>
​

As you can see I have set “inp” with width:auto property but it feels like not working at all. I noticed that the float property have something to do in this case. Why is it not working and how do I solve it?

Answer 1

You should set a width on the floated element. See this:

You should always set a width on floated items (except if applied
directly to an image – which has implicit width). W3C’s Cascading
Style Sheets, level 2, CSS2 Specifications states:

“A floated box must have an explicit width…”

http://css.maxdesign.com.au/floatutorial/introduction.htm

Although following that link to the spec, I couldn’t see the sentence quoted there..

Try setting either a pixel or % width on the float.