CODEWITHSUNDEEP
htmlcss
user1096509
user1096509

Reputation: 741

parent div scaling to content inside it

I thought a parent div automatically scales according to the content inside it. For example I have a div as a parent inside that I have another div with just text in it. When I view it through firebug its showing the parent div stretches all the way across the browser. I thought it should only stretch to the length of the text inside the inner div. How can I make the parent scale to the inner and not the full browser width. 

<div id="outter">
    <div id="inner">some empty text</div>
</div>

Upvotes: 1

Views: 15485

Answers (5)

kzoeps
kzoeps

Reputation: 471

You can also now have the width to be fit-content. https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

The below code worked for me:

<div>
<div style={'width': 'fit-content'} >hello world</div>
</div>

Upvotes: 0

clexmond
clexmond

Reputation: 1549

I think you'll find that those divs are both:

display:block;

If you do:

#outer, #inner {
    display:inline;
}

Both elements will be only as wide as their content.

Upvotes: 0

chadpeppers
chadpeppers

Reputation: 2057

By default the div inside the other will be as large as the div containing it. So you must set the size of the div "outter" or by default it will be 100% of the document

Upvotes: 0

Timmerz
Timmerz

Reputation: 6199

<div> is a block element. try <span>, or <div style="display:inline"></div>...<div style="float:left"></div> might have a similar effect.

Upvotes: 0

James Montagne
James Montagne

Reputation: 78750

An element which is display:block (which div is by default) by default is 100% width. display: inline or inline-block elements will fit to their content.

Upvotes: 4

Related Questions