Div height auto not resizing?

Question

I have a floated div, and a user can change the font size. When they do, I have this code:

$(element).css ( 'font-size', newFontSize); 
alert ( $(element).css ( 'height' ) ); //60px
$(element).css ( 'width', 'auto' );
$(element).css ( 'height', 'auto' );
alert ( $(element).height()); //60 - no resize

The idea is that by resetting the div to auto height, it should resize to fit the text, but it's not doing so. Ideas?

Answer 1

maybe your code doesn't work because you also set a min-height somewhere along with the height

as alternative idea you could set the height in em (or other relative measurements), so when you change the font-size the height will change automatically (without set its height to auto )

Answer 2

I just went through this, and someone here helped me out, so I'm passing it along:

You don't want to use height, you want to use a combination of min-height and overflow:

min-height:100%;
overflow:hidden;

It sounds counter-intuitive, I know. But it works.

In fact, you don't even have to use javascript to change the size of the DIV, at that point. The CSS will take care of it for you.