Hey there! I'm pretty new to StackOverflow and currently diving into fullstack web development. Just the other day, I embarked on creating my very own website, but now I find myself in a bit of a pickle. It seems that my image keeps appearing behind the next div's content instead of neatly positioning itself right below the text block. 😩 Could really use some guidance here, much appreciated for any help you can offer me! 🙏
Here's the code snippets:
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-8 text-container">
<p>
<h1>laoreet ante eget, vehicula ligula.</h1><br />
sed odio eu, eleifend aliquet urna. Donec ultrices dapibus ipsum.
Suspendisse ac hendrerit augue. Pellentesque massa eros, auctor ac sapien a, lacinia
luctus dolor. Proin et eleifend quam. Mauris tristique dictum tellus vitae molestie.
Praesent auctor justo nisl, eu porta leo aliquam at.
</p>
</div>
<div class="col-sm-4">
<img src="images/picture.png" class="picture-container my-picture" alt="">
</div>
</div>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 700px;
background-color: #ed8d8d;
}
.container {
height: 500px;
padding: 80px 0px;
}
.text-container {
width: 700px;
height: 500px;
float: left;
margin-top: 80px;
text-align: right;
}
.picture-container {
overflow: hidden;
}
/* IMAGES */
.sophie-picture {
height: 450px;
}