CODEWITHSUNDEEP
htmlcss
user6300260
user6300260

Reputation:

Div box inside another div not appearing

I hope you are having a good day! I have created a div in where I put 3 info boxes. The boxes are just not appearing when I set the width and height with percentages. But if I set them with pixels, they appear. I want them to be in percentages, because I want the website to be fully responsive on every device it's accessed. Any tips?

HTML&CSS:

#info {
  height: 50%;
  background-color: red;
}

.infoBox {
  width: 20%;
  height: 35%;
  background-color: blue;
  float: left;
  margin: 0 1%;
}
<div id="info">

  <div class="infoBox" id="infoBox1">

  </div>

  <div class="infoBox" id="infoBox1">

  </div>

  <div class="infoBox" id="infoBox1">

  </div>

</div>

Upvotes: 0

Views: 125

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106048

Your boxe has an height calculated to 'auto' because #info's parent has no height explicitly specified.

https://www.w3.org/TR/CSS2/visudet.html#the-height-property

<percentage>

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.

Usually, you manage to inherit viewport's height from html through body all the way to your container

html,
body {
  height: 100%;
}

#info {
  height: 50%;
  background-color: red;
}

.infoBox {
  width: 20%;
  height: 35%;
  background-color: blue;
  float: left;
  margin: 0 1%;
}
<div id="info">

  <div class="infoBox" id="infoBox1">

  </div>

  <div class="infoBox" id="infoBox2">

  </div>

  <div class="infoBox" id="infoBox3">

  </div>

</div>

NOTE

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Upvotes: 1

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

check now it is blank div so you have to give height in pixel or add content

.infoBox {
  width: 20%;
  min-height:200px;
  background-color: blue;
  float: left;
  margin: 0 1%;
  background-color:red;
}


#info {
  height: 50%;
  background-color: red;
}

.infoBox {
  width: 20%;
  min-height:200px;
  background-color: blue;
  float: left;
  margin: 0 1%;
  background-color:red;
}
<div id="info">

    <div class="infoBox" id="infoBox1">

    </div>

    <div class="infoBox" id="infoBox2">

    </div>

    <div class="infoBox" id="infoBox3">

    </div>

</div>

Upvotes: 0

Related Questions