How to adjust div width with the siz of text inside it

Question

My idea is to make each element within divs that have the .main_content class, to have a width equal to the width of the text inside it. How do I this?

As you can see, the width of each one (span, h2, p and h6) is the same as the .main_content div. The red border demonstrates this.

So, how do I make the width of each div fit the text within those divs? (With only CSS)

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;
}

.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>

P: I've been trying to manually set the size of width of each element. But there is too much code. Is there any clever way to to this?

`display:table` and the [support](https://caniuse.com/#search=display%3Atable) is wide — Rainbow, May 16 '20 at 17:10
from the duplicate: https://stackoverflow.com/a/37353025/8620333 .. display:table is the way to go here — Temani Afif, May 16 '20 at 19:55

score 3 · Answer 1 · edited May 16 '20 at 20:17

You can try with below css and see if it works.

.main_content {
  width: 100%;
  height: 400px;
  font-weight: 800;
}

.main_content>* {
  border: 1px solid red;
  display: table;
  margin: 0 auto;
  margin-bottom: 30px;
  text-align: center;
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
      <span class="growth">Growth</span>
      <h2>5 compelling user referral campaign examples</h2>
      <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
      </p>
      <h6>Author</h6>
    </div>
  </div>
</div>

CSS okay with IE and It even includes IE8 .... – G-Cyrillus May 16 '20 at 20:19 — G-Cyrillus, May 16 '20 at 20:19

bill.gates · Accepted Answer · 2020-05-16T17:16:50.200

1

Just 1 CSS function: width: fit-content Note here: It doesnt work in IE. Try it out:

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;

}

.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
  width: -moz-fit-content;
  width: fit-content;
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>

edited May 16 '20 at 17:16

answered May 16 '20 at 17:04

bill.gates

14,145
3
19
47

I love it, love it!! Many thanks! Thanks for your time! – Laura May 16 '20 at 17:07
@Laura no problem, an accepted answer would be great – bill.gates May 16 '20 at 17:08
I didnt know about this fit-content. Is it new? – Laura May 16 '20 at 17:08
1

Will not work in some browsers (notably Firefox) without a prefix: https://caniuse.com/#search=fit-content – Láďa Durchánek May 16 '20 at 17:10
1

@Laura it came out somewhere with the `grid` in 2017, but i am not sure, somebody correct me if i am wrong – bill.gates May 16 '20 at 17:15
1

@LáďaDurchánek i added an prefix – bill.gates May 16 '20 at 17:17

score 1 · Answer 3 · answered May 16 '20 at 17:05

Use flexbox on .main_content:

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main_content > * {
  border: 1px solid red;
  margin-bottom: 30px;
  text-align: center; 
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>

score 1 · Answer 4 · answered May 16 '20 at 17:06

You can simply use:

width: max-content;

for all the child elements and this will set the with for of each one (span, h2, p and h6) width of the text inside it.

.main_content {
  width: 100%;
  height: 400px;
  font-weight: 800;
}

.main_content>* {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
  width: max-content;
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
      <span class="growth">Growth</span>
      <h2>5 compelling user referral campaign examples</h2>
      <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
      </p>
      <h6>Author</h6>
    </div>
  </div>
</div>

it would be fine with a `max-width:100%;` to be alike `fit-content` somehow. — G-Cyrillus, May 16 '20 at 20:16

score 1 · Answer 5 · answered May 16 '20 at 17:09

add width: max-content to your .main_content > * {.

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;
}

.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center;
  width: max-content;
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>

it would be fine with a `max-width:100%;` to be alike `fit-content` somehow. — G-Cyrillus, May 16 '20 at 20:15

How to adjust div width with the siz of text inside it

5 Answers5