Floating divs contents to the bottom of the div. Sticking all content to bottom of surrounding div - html

Question

I am trying to position the second image inline next to the one before, the second image is smaller and i want it to sit on the same bottom line next to the larger one next to it. this will create a gap above the second image where i can put a small bit of text.
My problem is when i play around with background-size:, height: and width: to change the size of the image it just goes to the top left hand corner of its surrounding div.
I plan on having 4 more small image next to the small one so I'm asking please could anyone sort out the positioning of the divs and css so that i can easily add more next to the prior one,
Here is an image to give you an understanding of what i am trying to achieve, The red box shows where i want it to be positioned, and the other red box is where i will have the next skin.
LINK
Things i have tried:
Bottom:0
margin-top ( to push it down ) though this does not leave room for me to add text above the smaller images
padding-top:
Here is my current CSS:
#secondinner {
width:980px;
margin:0 auto;
overflow: hidden;
}
#dailyskin {
width:120px;
height:20px;
background-color:#336699;
color:white;
font-size:14px;
text-align:center;
padding-top:1px;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:110px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#downloadbutton1 {
width:100%;
}
#firstskin {
width:110px;
overflow:hidden;
float:left;
}
#secondskin {
width:100px;
overflow:hidden;
float:left;
padding-left:10px;
}
Here is the HTML:
<div id="secondinner">
<div id="dailyskin">Todays Daily Skin!</div>
<div id="firstskin">
<div id="topskin"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
<div id="secondskin">
<div id="topskin2"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
</div>
This is the third section to the index page.
</div>
Here is a JS fiddle to show you what i mean,
http://jsfiddle.net/bjbear123/qdwgpaqc/

Answer 1

display: table-cell; with a vertical-align: bottom could be a good solution.
Have a jsBin!
HTML
<div class="skin-wrap">
<div>
<img src="http://www.placehold.it/100X300" />
<button>Download</button>
</div>
<div>
<p>text above </p>
<img src="http://www.placehold.it/100X200" />
<button>Download</button>
</div>
</div>
This is the third section to the index page.
CSS
.skin-wrap {
display: table;
}
.skin-wrap > div {
display: table-cell;
width: 100px;
vertical-align: bottom;
padding: 10px;
}

Answer 2

And if you don't want / are not able to use table-cell as misterManSam answered you can use nested divs with position absolute.
.wrapper{
position: relative;
height: 200px;
width: 100px;
}
.content{
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="content">
<img src="whatever.jpg" />
</div>
</div>
And there you have a little jsbin http://jsbin.com/jiqakefu/1/

Answer 3

One easy solution is to increase the top margin of topskin2.
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
i tried this on jsfiddle both download button were inline.
You can set margin as per your need, if you want space between both then you can use margin-left to create gap.

Answer 4

you were right doing it through bottom:0;
The thing you missed was to set position:absolute; and for outer div position:relative;
Here's a fiddle: http://jsfiddle.net/Nive00/qdwgpaqc/2/