Issue
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>
Solution
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>Answered By - WillD
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.