Why div is not shown until its height is set?

HTML-CSS
1

Hi there,

I’m doing a Picasso Painting right now in fCC editor.
This is the entire code:
HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  </head>
  <body>
    <div id="back-wall"></div>
    <div class="characters">
      <div id="offwhite-character">
        <div id="white-hat"></div>
        <div id="black-mask">
          <div class="eyes left"></div>
          <div class="eyes right"></div>
        </div>
        <div id="gray-instrument">
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
        </div>
        <div id="tan-table"></div>
      </div>
    </div>
  </body>
</html>

CSS:

body {
  background-color: rgb(184, 132, 46);
}

#back-wall {
  background-color: #8B4513;
  width: 100%;
  height: 60%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#offwhite-character {
  width: 300px;
  height: 550px;
  background-color: GhostWhite;
  position: absolute;
  top: 20%;
  left: 17.5%;
}

#white-hat {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 120px 140px 180px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: GhostWhite;
  border-left-color: transparent;
  position: absolute;
  top: -140px;
  left: 0;
}

#black-mask {
  width: 100%;
  height: 50px;
  background-color: rgb(45, 31, 19);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#gray-instrument {
  background-color: rgb(167, 162, 117);
  width: 15%;
  height: 40%;
}

The (correct) result of the code above
The (correct) result of the code above1337×647 13.9 KB

We have: #offwhite-character element (long white bar)
We have its children: #white-hate, #black-mask, #gray-instrument

I can’t figure out why is that that if I set a background-color and width for, let’s say, #gray-instrument (grey bar on the left), it won’t be shown until I add the height for this selector?

I would say that it can be so because there is no height set for the #offwhite-character, but it is set, as you can see in the code (height: 550px;).
And if we set a background-color and height but no width for the #gray-instrument selector it would be shown as well.

I can’t figure out the reason and ask for explanation from you guys!

Best regards!

2

Because a div by itself doesn’t take up any height. So if you have no height then there is nothing to display. If there is an element inside of the div with height then the div will automatically stretch as high as needed to wrap that element. But if nothing inside of the div has any height then the div itself won’t have any height unless you set a specific height with CSS.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.