Element placement with padding

[IndianaGuy]

Hello all. I am trying to place the audio-black.png button in the bottom right corner of the div and have a padding at the bottom to separate the next div.

 

css file

div.polaroidCard {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 90%;
    border-radius: 1em 0em 0em 1em;
    float: left;
  height: 10em;
 // border: 0.1em solid green;
  background-color: #FFFFFF;
 
}
img.polaroidImg  {
    border-radius: 0.8em 0em 0em 1em;
     width:25%;
     height:100%;
     float:left;
    }
 
div.polaroidText {
padding: 0.2em 0em 0em 0.4em;
  float: right;
   text-align: left;
   //border: 0.1em solid green;
   width: 73%;
   height: 9em;
 
}
 
.polaroidPlayImg{
width: 20em;
height: 20em;
{

Edited December 31, 2016 by IndianaGuy

[IndianaGuy]

My HTML code (was not showing up in the original post

 

 

 
<div class="polaroidCard"><img class="polaroidImg" src="images/rock600x400.jpg" alt="Coach">
    <div class="polaroidText"><p>Tyson King</p>
    <input type="image" src="images/icons-png/audio-black.png" alt="Listen" value="Tyson_King.m4a" onclick="mySwitch(this)">
    </div>
</div>
 
<div class="polaroidCard"><img class="polaroidImg" src="images/rock600x400.jpg" alt="Coach">
    <div class="polaroidText"><p>Tyson King</p>
    <input type="image" class="polaroidBtn" src="images/icons-png/audio-black.png" alt="Listen" value="Tyson_King.m4a" onclick="mySwitch(this)">
    </div>
</div> 

[dsonesuk]

'//' is not used to comment out css, using this type of commenting for css will cause it to break and fail, it should be '/*' at beginning and '*/' at end.

[IndianaGuy]

Thank you I got the bottom margin figured out. I am not sure how to move the speaker icon to the right thou. Any idea?

[dsonesuk]

Use position: relative for the buttons parent element, then use position: absolute; with bottom: and right: properties to position it.