Dynadot .com transfer sale, only $10.12 with coupon code DYNA12, available while supplies last, ends October 1, 2026.

Vertical align bottom in css?

SpaceshipSpaceship
Spacemail by SpaceshipSpacemail by Spaceship
SpaceshipSpaceship
Watch

vlad230

VIP Member
Impact
15
Hi guys!

I would like to display an image (button) at the bottom of a div and I can't seem to find the way to do it.

This is my css code:

Code:
#Container { width: 1000px; margin: 20px auto }
.button { position:absolute; vertical-align: bottom; padding: 10px 10px 5px 10px }
#ArticlesContainer { float:left; width: 580px; height: 250px; background-image: url(images/articles.gif); background-repeat:no-repeat; margin-left: 5px; margin-right: 10px; margin-top: 20px }
.articles {text-align:justify; padding: 5px 5px 5px 5px }

I use it like this:
Code:
<body>
<div id="Container">
      <div id="ArticlesContainer">
                    <div class="articles">Some text here...</div>
                    <div class="button"><img src....></div>
      </div>
</div>
</body>

The code that I have right now will display the image at the bottom of "Some text here..." but I want it to be positioned at the base of the ArticleContainer div id without taking into account the amount of text written.

Like this:
Code:
-----------------------
| Some text here..          |
|                           |
|                           |
|                           |
|                           |
|                     image |
------------------------

Any ideas?

- Vlad
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
GoDaddyGoDaddy
I think that vertical-align: bottom doesn't work on all browsers, try bottom :0px; right: 0px;

for button
 
0
•••
can't you just use another div...?
 
0
•••
DomainEasy: white label portfolios are live. Enable yours.

We're social

Escrow.com
Spaceship
Escrowly
CryptoExchange.com
Domain Recover
Catchy
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back