Html - Why is this Div container showing?

junkerqueenlover
July 22, 2023
193 views
3 votes
3 Answers

I’m trying to put 3 divs into 1 div. As per my code, I’m trying to make Div 3 a container for Div 4-6. However, Div 3 and 6 are overlapping, despite being the same code as Div 5.

<!DOCTYPE html>
<html>

<head>
<style>
    #div1 {
        background-color: blue;
        width: 60%;
        height: 400px;
        text-align: center;
        margin: auto;
    }

    #div2 {
        background-color: red;
        width: 90%;
        height: 300px;
        text-align: center;
        margin: auto;
    }

    #div3 {
        background-color: gray;
        width: 95%;
        height: 200px;
        text-align: center;
        margin: auto;
    }

    #div4 {
        background-color: yellow;
        width: 20%;
        height: 100%;
        text-align: center;
    float:left;
    }

    #div5 {
        background-color: green;
        width: 40%;
        height: 100%;
        text-align: center;
    float:left;
    }

    #div6 {
        background-color: purple;
        width: 40%;
        height: 100%;
        text-align: center;
    float:left;
    }

</style>
</head>

<body>

    <div id="div1">test 1
    <div id="div2">test 2
    <div id="div3">test 3
    <div id="div4">test 4</div>
    <div id="div5">test 5</div>
    <div id="div6">test 6</div>
    </div>
    </div>
    </div>

</body>
</html>

Test 3 and test 6 are shown, but I do not want to see test 3

My professor helped me with the code and says the issue is my browser. I truly don’t know what to do

I tried using flex but everything teleported outside of the divs. I tried changing the float of div 6 but nothing moved. I tried everything I’ve been taught but none of it is working.

Tags: css html

Answers

If you use flex as shown here, apart from the text for DIV 3 needing consideration, it would be easy to fix. Another wrapper with a different flex direction would solve this.

<!DOCTYPE html>
<html>
<head>
<style>
    #div1 {
        background-color: blue;
        width: 60%;
        height: 400px;
        text-align: center;
        margin: auto;
    }

    #div2 {
        background-color: red;
        width: 90%;
        height: 300px;
        text-align: center;
        margin: auto;
    }

    #div3 {
        background-color: gray;
        width: 95%;
        height: 200px;
        text-align: center;
        margin: auto;
        display:flex;
    }

    #div4 {
        background-color: yellow;
        width: 20%;
        height: 100%;
        text-align: center;

    }

    #div5 {
        background-color: green;
        width: 40%;
        height: 100%;
        text-align: center;

    }

    #div6 {
        background-color: purple;
        width: 40%;
        height:100%;
        text-align: center;
    }
</style>
</head>
<body>
<div id="div1">test 1
<div id="div2">test 2
<div id="div3">
<div id="div4">test 4</div>
<div id="div5">test 5</div>
<div id="div6">test 6</div>
</div>
</div>
</div>
</body>
</html>

DIVs 4, 5, and 6 have float: left and are floated around the text "test 3". If you remove the text, then DIV 3 will no longer be visible:

#div1 {
  background-color: blue;
  width: 60%;
  height: 400px;
  text-align: center;
  margin: auto;
}

#div2 {
  background-color: red;
  width: 90%;
  height: 300px;
  text-align: center;
  margin: auto;
}

#div3 {
  background-color: gray;
  width: 95%;
  height: 200px;
  text-align: center;
  margin: auto;
}

#div4 {
  background-color: yellow;
  width: 20%;
  height: 100%;
  text-align: center;
  float:left;
}

#div5 {
  background-color: green;
  width: 40%;
  height: 100%;
  text-align: center;
  float:left;
}

#div6 {
  background-color: purple;
  width: 40%;
  height: 100%;
  text-align: center;
  float:left;
}

<div id="div1">test 1
  <div id="div2">test 2
    <div id="div3">
      <div id="div4">test 4</div>
      <div id="div5">test 5</div>
      <div id="div6">test 6</div>
    </div>
  </div>
</div>

You can add display: flex to #div3 to acheive the same layout without using float.

#div1 {
  background-color: blue;
  width: 60%;
  height: 400px;
  text-align: center;
  margin: auto;
}

#div2 {
  background-color: red;
  width: 90%;
  height: 300px;
  text-align: center;
  margin: auto;
}

#div3 {
  display: flex;
  background-color: gray;
  width: 95%;
  height: 200px;
  text-align: center;
  margin: auto;
}

#div4 {
  background-color: yellow;
  width: 20%;
  height: 100%;
  text-align: center;
  /* float:left; */
}

#div5 {
  background-color: green;
  width: 40%;
  height: 100%;
  text-align: center;
  /* float:left; */
}

#div6 {
  background-color: purple;
  width: 40%;
  height: 100%;
  text-align: center;
  /* float:left; */
}

<div id="div1">test 1
  <div id="div2">test 2
    <div id="div3">
      <div id="div4">test 4</div>
      <div id="div5">test 5</div>
      <div id="div6">test 6</div>
    </div>
  </div>
</div>

You can use position attribute.
That is, parent position will be relative, and children will be absolute.

<!DOCTYPE html>
<html>

<head>
<style>
    #div1 {
        background-color: blue;
        width: 60%;
        height: 400px;
        text-align: center;
        margin: auto;
    }

    #div2 {
        background-color: red;
        width: 90%;
        height: 300px;
        text-align: center;
        margin: auto;
    }

    #div3 {
        background-color: gray;
        width: 95%;
        height: 200px;
        text-align: center;
        margin: auto;
        position: relative;
    }

    #div4 {
        background-color: yellow;
        width: 20%;
        height: 100%;
        text-align: center;
        position: absolute;
        left: 0;
    }

    #div5 {
        background-color: green;
        width: 40%;
        height: 100%;
        text-align: center;
        position: absolute;
        left: 20%;
    }

    #div6 {
        background-color: purple;
        width: 40%;
        height: 100%;
        text-align: center;
        position: absolute;
        left: 60%;
    }

</style>
</head>

<body>

    <div id="div1">test 1
        <div id="div2">test 2
            <div id="div3">test 3
                <div id="div4">test 4</div>
                <div id="div5">test 5</div>
                <div id="div6">test 6</div>
            </div>
        </div>
    </div>

</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Why is this Div container showing?

Answers