In Web development, I am unable to bring two divs side by side with both width of 50%-CodePudding

When I am zooming it (in and out) and increasing font size above 10px the two divs goes up and down and not coming properly side by side. Where is the exact error?

<!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">
    <title>Trial Site</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        .container1{
            display: inline-block;
            background-color: aquamarine;
            height: 90vh;
            font-size: 20px;
            position: relative;
            width: 50%;
        }
        .container2{
            display: inline-block;
            background-color: coral;
            height: 90vh;
            font-size: 20px;
            position: relative;
            width: 50%;
            
  }
        </style>
</head>
<body>
<div >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias nostrum commodi aut ab corrupti repellendus accusamus hic quos. Explicabo porro vitae doloremque cumque quidem illo ratione vel omnis ex iure!</div><div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto nesciunt odio molestiae eaque tenetur, dolore quas excepturi in earum, totam iusto aut! Sapiente, optio. Facere illo eum, quas recusandae natus praesentium nemo consequatur consectetur delectus laboriosam quis adipisci eos dicta.</div>
</body>
</html>

CodePudding user response：


<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">
  <title>Trial Site</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

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

  .container1 {
    display: inline-block;
    background-color: aquamarine;
    height: 90vh;
    font-size: 20px;
    position: relative;
    width: 50%;
  }

  .container2 {
    display: inline-block;
    background-color: coral;
    height: 90vh;
    font-size: 20px;
    position: relative;
    width: 50%;

  }
</style>

<body>
  <div class=container>
    <div >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias nostrum commodi aut ab
      corrupti repellendus accusamus hic quos. Explicabo porro vitae doloremque cumque quidem illo ratione vel omnis ex
      iure!</div>
    <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto nesciunt odio molestiae
      eaque tenetur, dolore quas excepturi in earum, totam iusto aut! Sapiente, optio. Facere illo eum, quas recusandae
      natus praesentium nemo consequatur consectetur delectus laboriosam quis adipisci eos dicta.</div>
  </div>
</body>

</html>

Wrapping the div in two containers did solve the problem. We need to look at the problem a little bit more, but did the solution help us do this?

CodePudding user response：

this way...

* {
  margin  : 0;
  padding : 0;
  }
div {
  display        : inline-block;
  height         : 90vh;
  font-size      : 20px;
  /* position   : relative;      not needed.    */
  width          : 50%;
  vertical-align : top;       /* this one is missing.. */
  overflow       : scroll; /* could be usefull ?... */
  }
.container1 {
  background : aquamarine;
  }
.container2 {
  background : coral;
  }

<div >
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias nostrum 
  commodi aut ab corrupti repellendus accusamus hic quos. Explicabo porro 
  vitae doloremque cumque quidem illo ratione vel omnis ex iure!
</div><div >
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto 
  nesciunt odio molestiae eaque tenetur, dolore quas excepturi in earum, 
  totam iusto aut! Sapiente, optio. Facere illo eum, quas recusandae natus
  praesentium nemo consequatur consectetur delectus laboriosam quis adipisci
  eos dicta.
</div>