Dynadot Aftermarket: discover domain gems worth investing in. Visit our aftermarket.

Vertical align bottom in css?

Namecheap AuctionsNamecheap Auctions
SpaceshipSpaceship
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
Close
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
Close
can't you just use another div...?
 
0
Close
AIVikingsAIVikings

We're social

Escrow.com
Spaceship
Domain Recover
CryptoExchange.com

NamePros updates

Switch between accounts
You can now stay logged in to more than one NamePros account in the same browser. Click your avatar, then "Accounts in this browser", to...
AIVikings
Catchy
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back