title: How to display previous and next buttons on sides of images with variable width with css?
body: <p>I am creating a <strong>photo gallery</strong> (using javascript), and I want to display <strong>previous and next buttons</strong> on the current photo. Since we are talking about a photo gallery, the width of the currently displayed photo won't always be the same. I want the buttons to be over (in front of) the photo. What is the best way to do that with css?</p>
  
  <p><strong>The images have variable widths!!</strong> ex. Some will be in landscape mode, others in portrait</p>
  
  <p>I have tried to display the buttons with <code>&lt;a&gt;</code> element, and the <code>&lt;img&gt;</code> between them. I decreased the margins of the buttons so they would overlap the image.</p>
  
  <p>html part:</p>
  
  <pre><code>&lt;div class="col-md-12 cont"&gt;
     &lt;a role="button" data-slide="prev" class="prev"&gt;
        &lt;span class="carousel-control-prev-icon" aria-hidden="true" style=""&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
     &lt;/a&gt;
     &lt;img id="big-one" src="img.jpg" width="auto" height="550px" style="max-width: 100%;"/&gt;
     &lt;a role="button" data-slide="next" class="next"&gt;
        &lt;span class="carousel-control-next-icon" aria-hidden="true"style=""&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
     &lt;/a&gt;             
  &lt;/div&gt;
  </code></pre>
  
  <p>css part:</p>
  
  <pre><code>.cont{
     text-align:center;
  }
  .prev{
     cursor:pointer;
     margin-right:-24px;
     height: 100%;
     z-index: 1;
  }
  .next{
     cursor:pointer;
     margin-left:-24px;
     height: 100%;
     z-index: 1;
  }
  .carousel-control-prev-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
     height: 100%;
     background-color:blueviolet; //only for testing
  }
  .carousel-control-next-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
     height: 100%;
     background-color:blueviolet; //only for testing
  }
  .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     overflow: hidden;
     clip: rect(0,0,0,0);
     white-space: nowrap;
     border: 0;
  }
  </code></pre>
  
  <p>Contrary to my expectations, the previous button is behind the current image. And the image doesn't keep its vertical position. What do I have to fix in the good to get what I want?</p>