0

How can I have the blue block always centered while the other blocks are pushing against it on both sides? I tried using float to do the trick but it doesn't recognize the blue block as apart of the web flow and leaves a gap. Also, how can the blue box stay centered even if the width of the other boxes are randomly changing?

*by the way, you don't have to add any JavaScript, I just need help with the HTML and CSS template. *

body {
   background-color: gray;
}

#group {
  display: grid;
  grid-auto-flow: column dense;
  overflow: auto;
  border: black solid 10px;
}

.box {
  height: 8vw; 
}

#red {
  width: 20vw;
  background-color: red;
  float: right;
}

#blue {
  background-color: blue;
  margin-left: auto;
  width: 8vw; 
  margin-right: auto;
  clear: both;
}

#green {
  background-color: green;
  float: left;
  width: 10vw;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div id="group">
      <div class="box" id="red"></div>
      <div class="box" id="blue"></div>
      <div class="box" id="green"></div>
    </div>
  </body>
</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Miah Tayen
  • 63
  • 1
  • 5
  • why adding the JS tag if you are asking for a non-js solution? – Temani Afif Jan 03 '21 at 21:32
  • I asked this question before but it said that this question was too similar to another which then closed my question but I haven't found my solution from that, so I added something different to my question and hoped it will not get flagged for being too similar. – Miah Tayen Jan 03 '21 at 21:36

0 Answers0