trying to place 2 divs side by side without using flex or grid, similar to that of product pages in ecomm websites

Question

i am unable to place 2 divs side by side in effort to mimic a product display page in ecommerce site where image is displayed on the left and the following details on the right. mentioned below is my code. i am using display inline block to place 2 divs side by side. the right div doesnot seem to cover the 50 percent on the right side of the div. however when i make the 2 child divs as float left everything seems to work perfectly fine.. can any one explain how can i contain 2 child divs within a parent container div by using display inline block

<!DOCTYPE html>
<html>
<head>
<style>


section {

 width: 100vw;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 
}
.container {
   
   width: 400px;
   height: 400px;
   border: 1px solid red;
}

.div1 {
   width : 50%;
   height : 100%;
   background-color : lightblue;
   display: inline-block;
}

.div2 {
   width : 50%;
   height : 100%;
   background-color : lightpink;
   display: inline-block;
}
</style>
</head>
<body>

<section>
   <div class="container">

     <div class="div1"> </div>
     <div class="div2"> </div>

   </div>
</section>

</body>
</html>

score 0 · Accepted Answer · answered Aug 01 '22 at 19:58

Believe it or not your issue was that the browser was putting a space character between each of your inline divs. If you remove the whitespace between the closing tag of the first and the opening tag of the 2nd div it will not include a space character then the line of "text" (including your divs since they are display: inline-block which makes them behave somewhat like text) will not wrap onto two lines.

I would recommend using flex or grid for a two column layout, as it will eliminate this issue of your HTML being so sensitive to the whitespace and indentation and the like.

section {

 width: 100vw;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 
}
.container {
   
   width: 400px;
   height: 400px;
   border: 1px solid red;
}

.div1 {
   width : 50%;
   height : 100%;
   background-color : lightblue;
   display: inline-block;
}

.div2 {
   width : 50%;
   height : 100%;
   background-color : lightpink;
   display: inline-block;
}

<section>
   <div class="container">

     <div class="div1"> </div><div class="div2"> </div>

   </div>
</section>

trying to place 2 divs side by side without using flex or grid, similar to that of product pages in ecomm websites

1 Answers1