CSS buttons not aligning over image properly

Question

I am using a responsive design (bootstrap) with the following concept in mind:

Large responsive image, two buttons float over the image at the bottom of the image, buttons adjust relative to the image size as window size changes.

<div>
<span class="graphic-buttons" id="graphic-button-1">Button1</span>
<span class="graphic-buttons" id="graphic-button-2">Button2</span>
<div>
<img src="images/home/test.jpg"/>        
</div> 
</div> 

.graphic-buttons {
text-align:center;
font-size: 1.3em;
font-style:italic;
font-weight: 700;
line-height: 40px;
color: #000;
height: 40px;
padding: 10px 15px 10px 15px;
border-radius: 5px;
border: 1px solid #FFF;
box-shadow: 5px 5px 5px #000;
background: #FFF;
}

#graphic-button-1{
position: absolute;
bottom: 0;
right: 0;
}

#graphic-button-2{
position: absolute;
bottom: 0;
left: 0;
}

However, the buttons are positioning themselves further down past the image height and into content lower than the image.

I tried display: table-cell, vertical-align:bottom for the buttons but that has not worked.

Thanks.

Answer 1

You need to set parent as relative for positionning.
See comments in code revisited :).

<div class="bt_img">
<span class="graphic-buttons" id="graphic-button-1">Button1</span>
<span class="graphic-buttons" id="graphic-button-2">Button2</span>
<div>
<img src="images/home/test.jpg"/>        
</div> 
</div> 

.bt-img {
position:relative;/* childs in absolute will refer to area where .bt-img is displayed */
}
.graphic-buttons {
text-align:center;
font-size: 1.3em;
font-style:italic;
font-weight: 700;
line-height: 40px;
color: #000;
height: 40px;
padding: 10px 15px 10px 15px;
border-radius: 5px;
border: 1px solid #FFF;
box-shadow: 5px 5px 5px #000;
background: #FFF;
}

#graphic-button-1{
position: absolute;
bottom: 0;
right: 0;
}

#graphic-button-2{
position: absolute;
bottom: 0;
left: 0;
}
img {
vertical-align:top; /* or bottom: = removes it from baseline and shows no gaps under */
}