Div not containing span

July 24, 2022

The inner div (secondary div) apparently doesn’t contain the inner span tags when inspected using the dev tools. From what I’ve learned the divs automatically inherit the size (height and width) of the content inside the div, but in this case it’s not happening. What’s the reason? Are span tags the issue?

:root {
  --side_length: 200px;
  --dot_ratio: 0.15;
}

.dice {
  position: relative;
  margin: 0;
  perspective: 1000px;
  perspective-origin: 50% 100%;
}

.dot {
  background: #FFF;
  height: calc(var(--side_length) * var(--dot_ratio));
  width: calc(var(--side_length) * var(--dot_ratio));
  border-radius: 50%;
  display: inline-block;
}

.dot1 {
  position: absolute;
}

.dot2 {
  position: absolute;
  left: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}

.dot3 {
  position: absolute;
  left: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}

.dot4 {
  position: absolute;
  top: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}

.dot5 {
  /* (side_length - height) / 2 */
  position: absolute;
  top: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
  left: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}

.dot6 {
  position: absolute;
  top: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
  left: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}

.dot7 {
  position: absolute;
  top: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}

.dot8 {
  position: absolute;
  top: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
  left: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}

.dot9 {
  position: absolute;
  top: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
  left: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}

.face {
  height: var(--side_length);
  width: var(--side_length);
  margin: 0;
  background: #000;
}

<div class="face">
  <div style="position: absolute;">
    <span class="dot dot1"></span>
    <span class="dot dot2"></span>
    <span class="dot dot3"></span>
    <span class="dot dot4"></span>
    <span class="dot dot5"></span>
    <span class="dot dot6"></span>
    <span class="dot dot7"></span>
    <span class="dot dot8"></span>
    <span class="dot dot9"></span>
  </div>
</div>

codepen.io

>Solution :

See: https://developer.mozilla.org/en-US/docs/Web/CSS/position

In particular, it says:

position: absolute — The element is removed from the normal document flow, and no space is created for the element in the page layout.

If you change <span> to <p>, you will see the same problem. Put a coloured border on the inner div to see where it appears.

Using position: absolute to position each element individually is a very complicated way to approach this problem.

I would suggest using flexbox (you could also use gridbox).

Add a container class to the inner div. I added a red border to it so that you can see that it contains the white circles.

There are many ways to position the circles.

For example:

:root {
    --side_length: 200px;
    --dot_ratio: 0.15;
}

.dice {
    position: relative;
    margin: 0;
    perspective: 1000px;
    perspective-origin: 50% 100%;
}

.dot {
    background: #FFF;
    height: calc(var(--side_length) * var(--dot_ratio));
    width: calc(var(--side_length) * var(--dot_ratio));
    border-radius: 50%;
    margin: 17px;  
}

.sub-face {
    position: absolute;
}

.face {
    height: var(--side_length);
    width: var(--side_length);
    margin: 0;
    background: #000;
}

.container {
  border: solid 3px red;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div class="face">
  <div class="container">
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
  </div>
</div>