CODEWITHSUNDEEP
htmlcss
Matthew Colley
Matthew Colley

Reputation: 11446

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.

Upvotes: 0

Views: 611

Answers (2)

Navnit
Navnit

Reputation: 327

You can use something like this...

<div id="banner-top">
  <a class="btn btn-danger" id="back-button" role="button">Back</a>
  <img class="banner-image" src="http://lorempixel.com/1024/83/sports/Dummy-Text">
</div>

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

  .btn-danger {
    width: 40px;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
    position: absolute;
   }
   .banner-image {
     max-width: calc(100% - 48px);
     height: auto;
     width: auto;
     position: absolute;
     left: 40px;
    }

</style>

This will work fine.

Upvotes: 1

toerd
toerd

Reputation: 99

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...

Upvotes: 1

Related Questions