Set the width of a DIV depending on content in Foundation 5

Question

I want the width of a DIV only to be as wide as the content is and not fullwidth inside the parent DIV.

Example:

<div class="row">
    <div class="small-7 columns">
        <div class="mycontent> CONTENT </div>
    </div>
</div>

The width of "mycontent" is always 100% of the Available width inside "small-7 columns". How can I set the width of DIV to be only as wide as in this Example the word "CONTENT".

Answer 1

.mycontent{ display: inline; }

or

.mycontent{ display: inline-block; }

depending on how you want it to look like

Answer 2

You could set the "mycontent" class to display:inline-block; . Divs are block level elements and will naturally span the full width of the parent container.