matthew colley matthew colley - 3 months ago 9
CSS Question

CSS Alignment of button next to Image based on view port changes

I have a button, next to an image in a banner div. The Image size is 1024 x 83, when I view the page in a normal view, the button lines up next to the button just fine. However when I adjust the view port to below 1024 pixels, the image file drops beneath the button, but scales appropriately. I would like to keep the image next to the button without dropping beneath the button. Here is my HTML:

<div id="banner-top">
<a class="btn btn-danger" id="back-button" role="button">Back</a>
<img class="banner-image" src="img/banner.png">
</div>


Here is my existing CSS:

#banner-top {
height: 83px;
background-color: #CCC;
}

.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
.banner-image {
max-width: 100%;
height: auto;
width: auto;
}


I have tried to add float: left; to the .btn-danger and float: right; to the .banner-image, no joy. I then added display: inline-block; to both classes. Still no joy. I then added absolute-positioning but still having no success.

Answer

Have you tried to give the button a fixed width

.btn-danger {
  width: 40px;
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
  position: absolute;
 }

and your banner a margin-left with the width of the button:

.banner-image {
   max-width: 100%;
   height: auto;
   width: auto;
   position: absolute;
   margin-left: 40px;
  }

and position both absolute. That should work without changing your code to much.

JSFiddle Example: https://jsfiddle.net/g7ajkp9r/

Try restarting the fiddle if no image appears / the site where the placeholder images come from sometimes doesn't work properly...