How to divide width into equal boxes in CSS?-CodePudding

I'm learning CSS and I can't do this task even after I ask for hints. I just want the solution and I will keep track of the code. enter image description here

CodePudding user response：

You can convert the fractions into percentages, and then it's easy:

#one, #two {
  height: 100px;
  width: 48%; /*not exactly 1/2, because of marign in the middle*/
  background-color: pink;
  float: left;
  text-align: center;
}

#two {
  margin-left: 20px;
}

<div id="one">1/2</div>
<div id="two">1/2</div>

That should do it!

CodePudding user response：

You could use flex-grow property. If every child has the flex-grow: 1, it will take equal space in the container. If one has 2, it will take double etc..