Search code examples
htmlcontainersmultiple-columns

stuck trying to get these two columns side by side


Forgive my simple questions but im rather new to coding and im having trouble making my columns side by side, i was able to link images and external websites the way i wanted to but now have no idea how to get these two to be side by side. hopefully soon enough ill actually take the time and finally learn HTML but for now, im just shooting from the hip!

<div align="center">
  <div style="width: 25%;">
    <div class="section group">
      <div class="col-sm- span_1_of_2">
        <div class="container">
          <a href="www.externallink.com" target="_blank" rel="noopener"><img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsup-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;"/></a>
        </div>
      </div>
      <div class="col-sm- span_1_of_2">
        <div class="container2">
          <a href="www.externallink.com" target="_blank" rel="noopener"><img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsdown-1920w.jpg" alt="Thumbs Up Reviews CTA"  style="border: none;"/></a>
        </div>
      </div>
    </div> <!-- end width 25% div -->
  </div> <!-- end master centering div -->
  <br /><br />
</div>


Solution

  • The code you have provided is rather confusing. If I understand your question, you are trying to place the two images next to each other. Since you are using bootstrap, I would suggest:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <a href="www.externallink.com" target="_blank" rel="noopener"><img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsup-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;" /></a>
        </div>
        <div class="col-sm-6">
          <a href="www.externallink.com" target="_blank" rel="noopener"><img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsdown-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;" /></a>
        </div>
      </div>
    </div>

    This is what I would do in your situation. I do not understand the code you have provided though, but this should work.