How to create a div box with dynamic width based on text content?

Question

I want to create a simple div that shrinks and expands according to the content contained.

<body>
  <div style="border: 1px solid red; padding: 15px; width:auto;">
    test text
  </div>
</body>

Result: the red box expands to the full width of the page. Why?

StudioTime · Accepted Answer · 2018-07-06T10:53:51.237

15

Try this:

<div style="border: 1px solid red; padding: 15px; min-width:100px; display: inline-block">
  test text
</div>

edited Jul 06 '18 at 10:53

answered Jan 13 '16 at 12:22

StudioTime

4

`display: inline-block` was the key. thanks. – membersound Jan 13 '16 at 12:23

1 Answers1