How to make a block take minimum required width?

Question

So usually I would just slap display:inline-block on it but I still need the block to be on a separate line. Block does that but takes the most possible width of its parent container. How do I get a block that takes the minimum required width instead?

Answer 1

Here are 3 ways you could do this:

1) Use float:left and clear:left for the block elements. The drawback of this one is that any content before or after needs to be inside a block.

2) Use display: table

3) Force a line break using a pseudo selector (:after) while the elements get an inline display.

div[class] {
  margin:1em;
  padding-bottom: 1em;
  border-bottom:1px dashed #CCC;
  overflow: auto;
}

div > div {
  background:#000;
  color:#FFF;
  padding:1em;
}

/* solution 1: float clear */
.s1 div {
  float:left;
  clear:left;
}

/* solution 2: table */
.s2 div {
  display: table;
}

/* solution 3: break line with psuedo element (after) */
.s3 div {
  display:inline;
  padding:0;
}
.s3 div:after {
  content:"\A";
  white-space:pre;
}

<div class="s1">
  <p>Solution 1</p>
  <div>hello</div>
  <div>universe</div>
</div>

<div class="s2">
  <p>Solution 2</p>
  <div>hello</div>
  <div>universe</div>
</div>

<div class="s3">
  <p>Solution 3</p>
  <div>hello</div>
  <div>universe</div>
</div>

jsFiddle: https://jsfiddle.net/azizn/s9zxm2o4/