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: #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 } Code (markup): I use it like this: <body> <div id="Container"> <div id="ArticlesContainer"> <div class="articles">Some text here...</div> <div class="button"><img src....></div> </div> </div> </body> Code (markup): 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: ----------------------- | Some text here.. | | | | | | | | | | image | ------------------------ Code (markup): Any ideas? - Vlad
I can't believe there are 35 views and no one has a solution for my problem... Do I need to post some other information? - Vlad
You should not have separate divs for the image and text. .articles {background-image: url(images/articles.gif); background-repeat:no-repeat; background-position: bottom center;} HTML: Can you also clarify a little more of what you want to do? Do you want the image to be below the text no matter how much text you have, or do you want the button to be in one set position?
Thanks for the help, but I solved the problem... I just specified the height fo the articles class and the image from the button class was forced to be on the bottom. So I didn't actually need an alignment method The CSS validates so I guess it's OK