Why does this img div display in front of my other blocks? - html

Question

I applied display: block to my other divs but my image is displayed in front. I thought display: block would force a line break. Why is my image in front?
https://codepen.io/El_Escandalo/pen/PoPzXPZ?editors=1100

Answer 1

That's because your .container div is limited to height: 200px;. Erase that to allow its height to adjust to the contents, and your image container will be below it.

Answer 2

You've got an extra closed after container C.
* {
padding: 0;
margin: 0;
}
.container {
height: 200px;
text-align: center;
padding: none;
}
.a {
height: 100px;
width: 33%;
background: red;
display: block;
padding: none;
border: 10px solid purple;
box-sizing: border-box;
}
.b {
height: 100px;
width: 33%;
background: green;
display: block;
padding: none;
border: 10px solid purple;
box-sizing: border-box;
}
.c {
height: 100px;
width: 33%;
background: blue;
display: block;
padding: none;
border: 10px solid purple;
box-sizing: border-box;
}
.d {
border: 25px solid pink;
margin: 0 auto;
width: 75vw;
height: auto;
text-align: center;
}
.d img {
width: 100%;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="img-cont">
<div class="d">
<img src="https://cdn.pixabay.com/photo/2020/03/26/10/51/norway-4970019_1280.jpg" alt="view">
</div>
</div>