Make a div track down when resizing browser-CodePudding

I want to have the ability to move the .secDiv down when resizing the browser. Currently the coloured squares in the .boxes overlap the .secDiv when scaling the browser down.

Please assist.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.boxes {
  position: relative;
  width: 100%;
  height: 300px;
  border: 2px solid pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.red {
  width: 300px;
  background-color: red;
  height: 150px;
  margin: 15px;
}
.green {
  width: 300px;
  background-color: green;
  height: 150px;
  margin: 15px;
}
.blue {
  width: 300px;
  background-color: blue;
  height: 150px;
  margin: 15px;
}

.secDiv {
  position: relative;
  width: 100%;
  height: 300px;
  border: 2px solid yellow;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.red2 {
  width: 300px;
  background-color: red;
  height: 150px;
  margin: 15px;
}
.green2 {
  width: 300px;
  background-color: green;
  height: 150px;
  margin: 15px;
}
.blue2 {
  width: 300px;
  background-color: blue;
  height: 150px;
  margin: 15px;
}

  <div class="boxes">
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
    </div>
    
    <div class="secDiv">
        <div class="red2"></div>
        <div class="green2"></div>
        <div class="blue2"></div>
    </div>

CodePudding user response：

I would suggest using dynamic heights such as % or vh. Because you have a fixed height of 300px. It will try to keep that height when resizing, and simply your content doesn't fit in a 300px height when you resize. You can use something simple like overflow-y: scroll if you want to use a fixed height, but I don't think that is what you're going for. I added width: 50% on your boxes and secDiv classes. You can use either 50%, 25% or whatever you desire for your end result. But I would stay away from using fixed units when looking for a responsive design.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.boxes {
  position: relative;
  width: 100%;
  height: 50%;
  border: 2px solid pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.red {
  width: 300px;
  background-color: red;
  height: 150px;
  margin: 15px;
}
.green {
  width: 300px;
  background-color: green;
  height: 150px;
  margin: 15px;
}
.blue {
  width: 300px;
  background-color: blue;
  height: 150px;
  margin: 15px;
}

.secDiv {
  position: relative;
  width: 100%;
  height: 50%;
  border: 2px solid yellow;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.red2 {
  width: 300px;
  background-color: red;
  height: 150px;
  margin: 15px;
}
.green2 {
  width: 300px;
  background-color: green;
  height: 150px;
  margin: 15px;
}
.blue2 {
  width: 300px;
  background-color: blue;
  height: 150px;
  margin: 15px;
}

<div class="boxes">
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
    </div>
    
    <div class="secDiv">
        <div class="red2"></div>
        <div class="green2"></div>
        <div class="blue2"></div>
    </div>

CodePudding user response：

I've added the @media query, so it changes responsively when the browser resizes, and the <div>'s break nicely under each other.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
      height: 100vh;
  }
  
  .boxes {
    position: relative;
    width: 100%;
    height: 300px;
    border: 2px solid pink;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  
  .red {
    width: 300px;
    background-color: red;
    height: 150px;
    margin: 15px;
  }
  .green {
    width: 300px;
    background-color: green;
    height: 150px;
    margin: 15px;
  }
  .blue {
    width: 300px;
    background-color: blue;
    height: 150px;
    margin: 15px;
  }
  
  .secDiv {
    position: relative;
    width: 100%;
    height: 300px;
    border: 2px solid yellow;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  
  .red2 {
    width: 300px;
    background-color: red;
    height: 150px;
    margin: 15px;
  }
  .green2 {
    width: 300px;
    background-color: green;
    height: 150px;
    margin: 15px;
  }
  .blue2 {
    width: 300px;
    background-color: blue;
    height: 150px;
    margin: 15px;
  }

  @media(max-width: 994px) {
      .secDiv, .boxes {
          height: 600px;
      }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="boxes">
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
    </div>
    
    <div class="secDiv">
        <div class="red2"></div>
        <div class="green2"></div>
        <div class="blue2"></div>
    </div>
</body>
</html>