Min-width, max-width css use smallest width

Question

Alright, so what I'm hoping to do is to create a DIV that will autosize based on the content that's in it, but it should use the smallest width possible. I haven't a clue as to how to do this.

So, if I have a DIV tag that has 3 characters which is no doubt under 200px wide, what I want is for the div to be 200px then. If there's a lot more text I would like it to auto size up so that the text will fit.

**Is this possible with just ***CSS*?****

** UPDATE **

Let me see if I can explain this better. I have a DIV:

+++++++++++++++++++++++++++++++++
|-------------------------------|
|-----text this longer text-----|
|-------------------------------|
+++++++++++++++++++++++++++++++++

What I am hoping to have happen is if the text is changed it will still be at least 200px wide. Like this:

+++++++++++++++++++++++++++++++++
|-------------------------------|
|-------------text--------------|
|-------------------------------|
+++++++++++++++++++++++++++++++++

But if it was even longer text then the first example it would continue to expand outward past 200px wide:

++++++++++++++++++++++++++++++++++++++++++++++++++++++
|----------------------------------------------------|
|-----text this longer texttext this longer text-----|
|----------------------------------------------------|
++++++++++++++++++++++++++++++++++++++++++++++++++++++

However, I do have a limit (limited amount of space) that it can go so I need to put a maximum width to it. Does that make sense or do I need to clarify things more?

Answer 1

You can "shrink-wrap" a div in a few different ways. The easiest is probably to display: inline; but a float will behave like you describe as well.

Check out http://haslayout.net/css-tuts/CSS-Shrink-Wrap for details and more methods.

If you want the minimum width to be 200px (contradictory to your first paragraph) you can use min-width: 200px; along with display: inline-block for instance.

Answer 2

If I understood what you're asking about correctly, <div>s are block-elements, which means that by default they'll take a up a whole line -- 100% of the screen width. Try using the <span> element instead.

Hope that helped, but we can help you more if you specify what behavior you're trying to do or achieve.

Answer 3

The issue is that since <div>s are block-level elements, they do not auto-resize to fit their content, although their width can be explicitly defined. Inline elements like <span> do auto-size to fit their content, but they don't accept defining their width through CSS. The workaround is to make your <div> behave somehow like a table cell. Here's an example:

CSS:

.widthlim {
    min-width: 200px;
    max-width: 1000px;
    background-color: red; /*This is just for us to be able to see the width*/
    display: table-cell;
    word-wrap: break-word;
    word-break: break-word;
}

HTML:

Example 1:<br/>
<div class = "widthlim">
Hello
</div>
Example 2:<br/>
<div class = "widthlim">
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
Example 3:<br/>
<div class = "widthlim">
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div>

(Note how we had to add <br/>s before the <div>s because they're no longer completely block-level).
Here's how that looks when rendered: This seems to work on Firefox, Chrome, and IE8 (for IE8 you need to specify a DOCTYPE). I hope that helped!