Css, How do I set the width of an container

Question

Css question here: How do I set the width of a container just wide enough for how many characters are in the container?

Thanks for your help, -Matthew

score 2 · Answer 1 · answered Jun 10 '11 at 11:07

2

display: inline-block is an easy way to do this.

float: left is another option.

Make sure an explicit width is not being set, because that will disable the shrink-wrap behaviour.

http://jsfiddle.net/5jyAg/

answered Jun 10 '11 at 11:07

thirtydot

224,678
48
389
349

1

It's funny, I usually say that myself. Anyway, you're correct. If IE7 is a concern, see: http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575 – thirtydot Jun 10 '11 at 11:13
..and the comment vanished into the ether. – thirtydot Jun 10 '11 at 11:14
It should be noted that < IE7 does not support inline-block on inline elements. (PS: I wasn't sure about it being < IE6 instead so I decided to remove the comment :) – Kevin Jun 10 '11 at 11:15

score 1 · Answer 2 · answered Jun 10 '11 at 11:08

1

it depends on the container, if you use a span as the container, it will always be as wide as the characters in it.

but a span is inline element

answered Jun 10 '11 at 11:08

Fender

3,055
1
17
25

score 0 · Answer 3 · answered Jun 10 '11 at 17:41

You can try to put and even Padding into your style. For example if your markup looks like this.

<div>
     <p class="paddThis">Your text</p>
</div>

and in your style sheet set the padding of the right and/or left of the text your text will push the left and right border of your container a certain amount of pixels away from you text creating which should accomplish what you are trying to do.

Your style sheet might look like this

.paddThis
{
   padding: 0 5px 0 5px;
}

Css, How do I set the width of an container

3 Answers3