Positiong images at bottom of div

HTML & CSS
1

Hello,

How can I place the pizza and cupcake at the bottom of the orange div, so the white touches the div below.

Here is the link to the website…

http://modocom.ca/eat/category/pizza/

Thanks,

Mike

2

Try adding a margin:


<a href='http://modocom.ca/eat/wp-content/themes/eatlocal/img/pizza-button-active.png' style='margin: 0 0 -42px 0' alt='#' />
3

This doesnt work that well especially when theres more text on the left hand side. But thanks, hopefully can try to solve it.

4

Hi,

You could just have put them as a background image on the orange div and placed them at the bottom position.

Or you could absolutely place them at the bottom but you will need to ensure content stays clear.


.row .buts{
margin:0;
position:absolute;
left:75%;
bottom:-10px;
width:210px;
}
5

Concept, not polished solution, but it should get you in the ballpark.
ADD the BLUE, DELETE the RED.

1140.css, line 15


.row {
    margin:0 auto;
    max-width:1140px;
    min-width:755px;
    overflow:hidden;
    [color=blue]position:relative;[/color]
    width:100%;
}

styles.css, line 177


.buts {
    [color=blue]bottom:-8px;[/color]
    [color=red][s]margin-top:80px;[/s][/color]
    [color=blue]position:absolute;[/color]
    [color=blue]right:0;[/color]
}

EDIT:
ninja’d by Paul :stuck_out_tongue: (more efficiently, too :slight_smile: )