Patrickkx Patrickkx - 5 months ago 22
CSS Question

Even if the img is in a separate div, it doesn't show up

Experiencing problem in positioning an image. Look, I have made two columns in one div. Every of them has 50% width. Why the image doesn't appear in the second column, even if there's enough space for it? How to make it go to the second column? Into the



* {
margin: 0;
padding: 0;
border: 0;
body {} .container {
width: 100vw;
height: 100vh;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue
.content {
text-align: center;
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
min-height: 50vh;
min-width: 70%;
.msgDiv {
width: 50%;
.imgDiv {
width: 50%;
.imgDiv img {
width: 200px;
height: 200px;

<div class="container">
<div class="content">

<div class="msgDiv">
<h2>Are you hungry? </h2>

<div class="imgDiv">
<img src="" alt="" />



add this to .content:


fiddle here: