I am currently exploring the use of containers with float and I am puzzled by the extra white space above the .right div box. The strange thing is, when I remove the image, the space disappears. However, once I reintroduce the image, the spacing above the red section reappears. Can anyone shed some light on why this is happening?
#container {
width: 1000px;
margin: 0 auto;
background-color: lightgray;
}
.left {
width: 700px;
float: left;
background-color: blue;
}
.right {
width: 300px;
margin: 0 0 0 700px;
background-color: red;
}<html>
<head>
</head>
<body>
<div id="container">
<img src="https://picsum.photos/300/300?image=0">
<div class="left">
<p>Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here.</p>
</div>
<div class="right">
<p>Insert dummy text here. Insert dummy text here.</p>
</div>
</div>
</body>
</html>