I'm attempting to create a button (div with background color) positioned just below an image that aligns with the right side of the image. Both elements are contained within a wrapper div. When I float the button to the right, it causes the wrapper div to expand and the button extends beyond the right edge of the image. It is not possible to set a fixed width for the wrapper div as it needs to be responsive.
Here's what I currently have:
<div class="col-xs-6">
<div class="wrapper">
<h2>Title</h2>
<img class="responsive">
<div class="button"></div>
</div>
</div>
.button {
float: right;
}
Essentially, how can I make the wrapper div match the width of the image? Or is there another method to align the button div with the right edge of the image?
The image occupies about 70% of the width of the col-xs-6 div, and I cannot make it fill the entire div as there is another image next to it with spacing between them.
Note: Bootstrap is being used for responsiveness.