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

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-06 10:53:51Z

17

Try this:

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

answered Jan 13, 2016 at 12:22

StudioTime

24.3k40 gold badges129 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

display: inline-block was the key. thanks.