Min-width, max-width css use the minimum width

Question

Okay, so I hope this is to create a DIV that will log in based on the content that is in it, but it should use the minimum width. I do not know how to do that.

So, if I have a DIV tag that has 3 characters, which is without a doubt less than 200 pixels, then I want the div to be 200px. If there is much more text, I would like it to automatically increase so that the text fits.

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

** UPDATE **

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

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

I hope this happens if the text is changed, it will still have a width of at least 200 pixels. Like this:

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

But if it was an even longer text, then the first example would continue to expand beyond the width of 200px:

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

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

Answer 1

The problem is that since <div> are block elements, they do not automatically change to fit their content, although their width can be explicitly determined. Inline elements such as <span> do auto-size to fit their content, but they do not accept the definition of their width via CSS. The workaround is to make your <div> look something like a table cell. Here is 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 that we needed to add <br/> to the <div> , because they are no longer completely blocky).
Here's what it looks like when rendering: This is similar to Firefox, Chrome and IE8 (for IE8 you need to specify DOCTYPE). Hope this helps!

Answer 2

If I understand correctly what you are asking, <div> are block elements, which means that by default they occupy a whole line - 100% of the screen width. Instead, try using the <span> element.

Hope this helps, but we can help you more if you indicate what behavior you are trying to do or what you have achieved.

Answer 3

You can compress-wrap a div in several ways. The lightest, probably for display: inline; but the float will behave just like you.

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

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