Many individuals seem to be inquiring about this issue, yet I am still unable to resolve it completely. The image I have linked closely resembles what I am aiming for. I would like the image in each section to flow from left to right, as it currently does, but the second image (on the right) and its corresponding text (below) are not aligning properly with the first 'block'. Additionally, I am also looking to incorporate a third section with an image aligned to the left, but I am uncertain of how to correctly execute this.
View the current site image here
Here is the current HTML code:
<div id="container">
<div id="floated-img">
<img src="image" alt="">
<p>
Lorem...
</p>
</div>
</div>
<div id="container1">
<div id="floated-img1">
<img src="image" alt="">
<p>
Lorem...
</p>
</div>
</div>
And this is my CSS code:
#floated-img img {
display: block;
width: 200px;
float: left;
margin-right: 10px;
margin-top: -16px;
margin-left: -16px;
}
#floated-img p {
margin-top: -7px;
}
#floated-img1 img {
width: 200px;
float: right`
margin-right: -16px;
}