Language…
24 users online:  AmperSam,  Anorakun, Beed28, CircleFriendo, crocodileman94, DanMario24YT, gizmo_321, Golden Yoshi, Green, Hammerer, Heitor Porfirio, JezJitzu, Maw, Mohamad20ZX, OEO6, OrangeBronzeDaisy, Papangu, recam, Serge, signature_steve, SMW Magic, Spedinja, TrashCity, yoshisisland - Guests: 291 - Bots: 440
Users: 64,795 (2,370 active)
Latest user: mathew

I'm having trouble getting my layout to do what I want.

Do you see those walking My Little Pony ponies in my new layout? Well, I want them to always be at the lower right corner of the layout. If a line is added or removed, I want the images to still be at the lower right corner. I tried for hours last night to get this behavior by applying style="float: right" attributes to the images, but it might end up looking something like this.



I don't want all that space between the last line of text and the bottom of the layout.

Does anyone know how to make the images always be at the lower right corner of the layout?

Also, I want to shift the images vertically so that the ponies are walking on the same horizontal plane. How do I vertically shift images like that?

Click the character on the right side of my layout to visit my Discord server and discuss and play and look at and get updates and sneak peeks of the games and other things I'm making.

The authors of these 2 My Little Pony fan games have removed their games from the Internet.
Rise of the Clockwork Stallions has been updated! Download My Little Pony: Rise of the Clockwork Stallions DX: Director's Cut and My Little Pony: Magic Shards now! Spread this link!

Either:

Code
<hr>
<div style="float: right;">
<img src="https://bin.smwcentral.net/u/20977/luna_walk_left.gif">
<img src="https://bin.smwcentral.net/u/20977/walk_left.gif">
</div>
[... rest of your signature goes here ...]

Or:

Code
<hr>
<div style="position: relative; padding-right: 336px;">
<div style="position: absolute; right: 0; bottom: 0;">
<img src="https://bin.smwcentral.net/u/20977/luna_walk_left.gif">
<img src="https://bin.smwcentral.net/u/20977/walk_left.gif">
</div>
[... rest of your signature goes here ...]
</div>

The first option is less tricky to use but it can only align the images against the top-right corner, not the bottom-right corner.

  • float: right; will float an element either directly left or directly right of where it should be. It can only do horizontal alignment, no vertical one.
  • position: absolute; right: 0; bottom: 0; will tell an element to align itself exactly 0px away from the right-most and bottom-most corners of the screen or the last relative-positioned element, if there is one.
  • position: relative; will tell an element to be relative-positioned (you can shift its position).
  • padding-right: 336px; is necessary so your text doesn't end up occupying the space behind the images. It's set to the same width as both your images (144 + 192).

Note that while there is a vertical-align: bottom; rule, it works only under very specific situations, so it ain't gonna work here.
Well, I don't know how I did it, but I think I did it. Thanks RanAS!#fim{^_^}

Click the character on the right side of my layout to visit my Discord server and discuss and play and look at and get updates and sneak peeks of the games and other things I'm making.

The authors of these 2 My Little Pony fan games have removed their games from the Internet.
Rise of the Clockwork Stallions has been updated! Download My Little Pony: Rise of the Clockwork Stallions DX: Director's Cut and My Little Pony: Magic Shards now! Spread this link!