Explanation of DIV Tag

[javedk]

Why does the output change if the div tag closes immediately after “box container” and is different if the div tag closes after “box-2 id”? How to know when to close div tag? Also, I would appreciate if the explanation is simple to understand.
Furthermore, what does div tag do?

  **Your code so far**

<style>
#box-container {
  display: flex;
  height: 500px;
  flex-direction: row-reverse;
}
#box-1 {
  background-color: dodgerblue;
  width: 50%;
  height: 50%;
}

#box-2 {
  background-color: orangered;
  width: 50%;
  height: 50%;
}
</style>

<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

  **Your browser information:**

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

Challenge: Use the flex-direction Property to Make a Row

Link to the challenge:

freeCodeCamp.org

[MrBondx]

@javedk

<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

What you have done there is placing 2 divs inside another div. A div is like a container. If you close it early it means its standing on its own. So you basically have 3 empty divs.

[javedk]

MrBondx, Thank you very much for your reply. Can you please tell me the meaning of “container” “standing on its own”. for div tag.
What exactly is div tag? This is something I know nothing about.

[jsdisco]

On the page, a <div> is a rectangle box. You can see that if you add a border to your CSS:

  #box-container {
    display: flex;
    height: 500px;
    border:1px solid red;
  }

Sometimes a <div> is just an empty box with no text or images inside, like box-1 and box-2. Those only have a background-color. Sometimes a <div> has other elements in it, like the #box-container.

It’s a good idea to give all your elements a border when you start out, so you see exactly where an element is located and how big it is, and what’s inside/outside of it.

[javedk]

Thank you very much for your response. The height mentioned in box-container is 500px, box-1 is 50% and box-2 is 50%. Why are three different heights given.? Are they three different boxes?

[jsdisco]

Yes, every <div> is a different box. The outermost box (#box-container) has a height of 500px. The two <div> boxes inside of it have a height of 50%, which means they have a height of 250px (half of the parent container box).

[javedk]

Thank you very much. Appreciate your response.