How to I create 50/50 horizontal DIV areas?

Question

I've been able to create 2 DIV areas, but they only stack, I would like to make them 50/50?

Thanks for any help.

<body>
  <div id="left">
  <p>TEST</p>
  <p>TEST</p>
  <p>TEST</p>
  </div>
  <div id="right">
  <p>TEST</p>
  <p>TEST</p>
  <p>TEST</p>
  </div>
</body>
</html>

https://stackoverflow.com/questions/5387392/how-to-get-these-two-divs-side-by-side — PsiKai, Mar 09 '22 at 00:57

score 1 · Answer 1 · answered Mar 09 '22 at 01:14

maybe this can help. sorry if i false

.wrapper{
display:flex;
flex-direction:row;
}
#left{
background-color:#32a852;
text-align:center;
width:50%;
}
#right{
background-color:#5b1982;
width:50%;
}

<div class="wrapper">
  <div id="left">
  <p>TEST</p>
  <p>TEST</p>
  <p>TEST</p>
  </div>
  <div id="right">
  <p>TEST</p>
  <p>TEST</p>
  <p>TEST</p>
  </div>
</div>

score 1 · Answer 2 · answered Mar 09 '22 at 01:44

1

div{
   display:inline-block;
   width:calc(50% - 2px);
   border:solid 1px green;
   height:100px;  
   margin:0;
   padding:0;
}
   
   
body{
margin:0;
}

<div></div><!--
--><div></div>

answered Mar 09 '22 at 01:44

DCR

14,737
12
52
115

How to I create 50/50 horizontal DIV areas?

2 Answers2