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

24.4k40 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.