Align one floated image underneath another

Would appreciate if someone could help me get the 2nd image underneath the 1st

Try adding a few <br> elements between. It should align them perfectly in the center, stacked on top.

2 Likes

I’d rather not as it can sometimes get messy using <br>s. Any other methods like css values?

Let me try using your code a different method.

2 Likes

I fail to understand. This looks fine…

I did it with <br>s
This is what it’s supposed to look like
But I would rather do it with CSS values

Oh, you could set their position to absolute and the first one would be 0% 0% and the second one would be 100% 100%.

It seems you have misunderstood me. I don’t want the 2nd at the very bottom of the page, just underneath the first image/section. Sorry for the confusion :slight_smile:

I “hacked” around it and did a few spaces with one br and a p element
just put this right between your elements

<p style="line-height:200px;">  &nbsp;  <br>  &nbsp;  </p>

Oh ok, then set that as the background-image, and then make its position absolute and 0% 0%

(everyone in this thread is a regular lol)

You could make the properties like:

.adiv {
position:absolute;
right:0%;
top:150%;
}

and put all your code in that one div

The easiest way would be to put every row in a div, like this:

<div class="myClass">
  <img>
  <h2>Sample text</h2>
  <p>More sample text</p>
</div>
<div class="myClass">
  <img>
  <h2>Sample text</h2>
  <p>More sample text</p>
</div>

and then add the following CSS:

.myClass:after {
  clear: both;
  content: '';
  display: block;
}
1 Like