CODEWITHSUNDEEP
htmlcss
rnk
rnk

Reputation: 2204

Width auto is not working when hover

I'm creating a web application where I need to do some design tweaks. Please check this one http://jsfiddle.net/rkumarnirmal/5w3FG/9/

When I hover, it shows the border in gray. What I need is I want to fit the border box to fit the width of the text. I tried to set the width:auto but still its not working, showing the border box to the page width size.

How can I do it?

Thanks!

Upvotes: 1

Views: 348

Answers (2)

Rob Allen
Rob Allen

Reputation: 17709

width:auto on a div translates to width:100% because a div is a block level element.

If you want to have it size to the text you'll need to either use a more appropriate inline tag like a span or depending on the semantic meaning of the data, a definition list (dl).

You can also change the display property of your wrapper div to be inline or inline-block but that is not semantically correct.

Upvotes: 0

shanethehat
shanethehat

Reputation: 15570

Set text-preview to inline-block:

#text-preview {
    display:inline-block;
    zoom:1; /* if you need IE7 support */
}

Inline-block will cause the element to render as if inline rather than occupying all of the available horizontal space, but will lets you set inner dimensions and padding as a block element would.

Note that IE7 doesn't support inline-block unless you force the hasLayout property. The easiest way to do that is with zoom:1;.

Upvotes: 2

Related Questions