Example not rendering using the DOCTYPE tag

Tell us what’s happening:

Hello! I’m currently facing a problem, it has nothing to do with the challenge but on the actual “html” file and syntax.

Usually every challenge I write the code on a external file before doing/solving the example (to have some more practice on a real editor) and that worked fine until I got here [" CSS Flexbox: Use the flex-wrap Property to Wrap a Row or Column"].

What’s the problem? Well, the code presented didn’t render anything until I removed the <!DOCTYPE html>, tried removing all of the other tags, formatting and even tried to recreate the scenario manually, I also tried to put the styles on a separate styles.css file but only removing the DOCTYPE tag has worked…

The problem seems to be using the height: 100% attribute, but why does it work fine removing the DOCTYPE tag?

It also works specifying another type of height like pixels or viewport-percentages.

Thanks anyways.

[Solution] Not having a valid DOCTYPE reverts to Quirks Mode which doesn’t specify the need to put a valid parent size of the element in which the divs are contained, this case being the body, if we wanted to work in the [Standards Mode] we need to specify the size of the parent elements, so a:
html, body { height: 100%; }
should make it work.

Your code so far


<!-- <!DOCTYPE html> -->
<html>
<head>
	<title>11 Use the flex-wrap Property to Wrap a Row or Column</title>
  <style>
        /* Solution */
		/* html, body {
    	    height: 100%;
		} */
    #box-container {
      color:red;
      background: gray;
      display: flex;
      height: 100%;
    }
    #box-1 {
      background-color: dodgerblue;
      width: 25%;
      height: 50%;
    }
    #box-2 {
      background-color: orangered;
      width: 25%;
      height: 50%;
    }
    #box-3 {
      background-color: violet;
      width: 25%;
      height: 50%;
    }
    #box-4 {
      background-color: yellow;
      width: 25%;
      height: 50%;
    }
    #box-5 {
      background-color: green;
      width: 25%;
      height: 50%;
    }
    #box-6 {
      background-color: black;
      width: 25%;
      height: 50%;
    }
  </style>
</head>
<body>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
  <div id="box-4"></div>
  <div id="box-5"></div>
  <div id="box-6"></div>
</div>

</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36 Edg/85.0.564.41.

Challenge: Use the flex-wrap Property to Wrap a Row or Column

Link to the challenge:

Hey Erick,

nice to meet you! :wave:

This is indeed an interesting question!

Thanks for the interesting question, I learned new stuff :slightly_smiling_face:

3 Likes

I think the reason why it works in the preview pane is that the iframe has height 100% and is inside elements that are also setting the height based on some parent element container that has height: 100vh (well it’s using a calc function as well but that is beside the point).

Example
<div class="some-parent">
  <div class="pretend-iframe">
    <div id="box-container">
      <div id="box-1"></div>
      <div id="box-2"></div>
      <div id="box-3"></div>
      <div id="box-4"></div>
      <div id="box-5"></div>
      <div id="box-6"></div>
    </div>
  </div>
</div>
.some-parent {
  height: 100vh;
}

.pretend-iframe {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background-color: #fff;
}

#box-container {
  background: gray;
  display: flex;
  height: 100%;
}

#box-1 {
  background-color: dodgerblue;
  width: 25%;
  height: 50%;
}

#box-2 {
  background-color: orangered;
  width: 25%;
  height: 50%;
}

#box-3 {
  background-color: violet;
  width: 25%;
  height: 50%;
}

#box-4 {
  background-color: yellow;
  width: 25%;
  height: 50%;
}

#box-5 {
  background-color: green;
  width: 25%;
  height: 50%;
}

#box-6 {
  background-color: black;
  width: 25%;
  height: 50%;
}

Still not entirely sure why the height is calculated the way it is in quirks mode, other than for historical reasons (I mean the technical reason why).

stackoverflow thread with some more info and links

2 Likes

I’ll also add that if you modify the doctype tag like this :

<!DOCTYPE html5>

It’ll work perfectly :slight_smile:

1 Like

Hey there,

maybe because it is an invalid doctype and doesn’t get used.

I can’t find this one on the official W3C site:
https://www.w3.org/QA/2002/04/valid-dtd-list.html