Using Float with Flex Box-CodePudding

I am trying to arrange 4 divs of equal height and width in a single div that is my container .Arranging my div with the help of float property . Inside my 4 div I want to center the content with flex box . But when I use flex box in my all 4 divs then my style gets wrong.

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

#container .divheight {
  width: 49.8%;
  height: 50vh;
  border: 2px solid red;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

#d1 {
  float: right;
}

#d3 {
  float: right;
}

<body>
  <div id="container">
    <div id="d1" >1</div>
    <div id="d2" >2</div>
    <div id="d3" >3</div>
    <div id="d4" >4</div>
  </div>
</body>

CodePudding user response：

You should also make sure to diplay all of them on top of each other when the page is minimized on a smaller display, because if you minimize the page now, they will still stay next to each other and look very small...try it out with Inspect Element for a better understanding!

CodePudding user response：

Okay... I found my mistake that I gave more width of my each div