Make div width scale to width of content

Question

I was looking at this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_chat

and was interested in changing it so the maximum width of a message container is that of it's inner content (the length of the text). Currently the message container fills up the width of the body.

I have been trying many display methods etc however I've been unable to get the desired result.

Answer 1

just adding display:inline-flex solves your problem but you may still need to add clearfix div at end of every container here is working example to help you out.Hope that helps

body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  display:inline-flex;
}

.darker {
  border-color: #ccc;
  background-color: #ddd;
  direction:rtl;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

.container img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

<h2>Chat Messages</h2>

<div class="container clearfix">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
  <p>Hello. How are you today?</p>
  <span class="time-right">11:00</span>
</div>
<div id="clearfix"></div>
<div class="container darker clearfix">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" class="right" style="width:100%;">
  <p>Hey! I'm fine. Thanks for asking!</p>
  <span class="time-left">11:01</span>
</div>
<div id="clearfix"></div>
<div class="container clearfix">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
  <p>Sweet! So, what do you wanna do today?</p>
  <span class="time-right">11:02</span>
</div>
<div id="clearfix"></div>
<div class="container darker clearfix">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" class="right" style="width:100%;">
  <p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
  <span class="time-left">11:05</span>
</div>
<div id="clearfix"></div>
 

Answer 2

body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.darker {
  border-color: #ccc;
  background-color: #ddd;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

.container img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}

.section {
  padding: 20px;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
}

.container {
  margin-left: 0;
  margin-right: auto;
}

.container.darker {
  margin-left: auto;
  margin-right: 0;
}

<section class="section">
  <div class="container">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
  <p>Hello. How are you today?</p>
  <span class="time-right">11:00</span>
</div>

  <div class="container darker">
    <img src="https://www.w3schools.com/w3images/avatar_g2.jpg" alt="Avatar" class="right" style="width:100%;">
    <p>Hey! I'm fine. Thanks for asking!</p>
    <span class="time-left">11:01</span>
  </div>

  <div class="container">
    <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
    <p>Sweet! So, what do you wanna do today?</p>
    <span class="time-right">11:02</span>
  </div>

  <div class="container darker">
    <img src="https://www.w3schools.com/w3images/avatar_g2.jpg" alt="Avatar" class="right" style="width:100%;">
    <p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
    <span class="time-left">11:05</span>
  </div>
</section>