Aligning text and wrapping it next to an image

Question

I'm trying to align the text next to my image thumbnails like so: https://i.stack.imgur.com/qiteh.png

I created a similar layout from scratch, here: https://codepen.io/atnd/pen/qzaVLX

    #video_player {
        display: table;
        margin: 0 auto;
        background: #000;
        max-width: 1140px !important;
        max-height: 360px !important;
    }

    #firstvideo {
        height: 100%;
    }

    #firstvideo iframe {
        height: 360px;
        width: 600px;
    }

    #video_player iframe, #video_player #figcaption {
        display: table-cell;
        vertical-align: top;
        background: #FFFFFF;
        overflow-y: scroll;
    }

    #video_player #figcaption {
        border: 2px solid #9aacd5;
        border-left: 0px;
    }

    #vidcontainer {
        height: 360px;
        width: 303px;
    }

    #video_player #figcaption a {
        display: block;
        font-size: 12px;
        line-height: 0px;
        border-bottom: 1px solid #e3e5eb;
        color: #000000;
        text-decoration: none;
        padding: 12px 12px 13px 12px;
    }

    #video_player #figcaption a:nth-of-type(7) {
        border-bottom: none;
    }

    #figcaption a:hover {
        background-color: #E3E5EB;
    }
    #figcaption a:selected {
        background: #406acb;
        color: white;
    }

    .wistia_bento_item_name {
        vertical-align: top;
        font-family: Arial;
        padding-left: 2%;
    }

    #video_player #figcaption::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    #video_player #figcaption::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
    }
    #video_player #figcaption::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #c1daec;
    }

    <div id="video_player">
 <div id="firstvideo">
     <iframe src="//fast.wistia.net/embed/playlists/jswgmiwvqy" allowfullscreen></iframe>
 </div>
   <div id="figcaption">
  <div id="vidcontainer">
  <a href="#wistia_khpjv95u1u"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/5e9af872d0c0b2c36a90b650175f270eb8e3a306.jpg?&image_crop_resized=100x60" width="100" alt="The Future of Company Tickets"><span class="wistia_bento_item_name">The Future of Company Tickets</span></a>

  <a href="#wistia_rcyldd4352"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/56111fc6eed70ca28114e4a993b60a0b98919fc2.jpg?&image_crop_resized=100x60" width="100" alt="Company Tickets & the New Tax Law"><span class="wistia_bento_item_name">Company Tickets & the New Tax Law</span></a>

  <a href="#wistia_wo1fhqfjpf"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/a804723abfe40dc8d08c68a40720d1b665048a2d.jpg?&image_crop_resized=100x60" width="100" alt="How Anheuser-Busch Measures Sponsorship ROI"><span class="wistia_bento_item_name">How Anheuser-Busch Measures Sponsorship ROI</span></a>

  <a href="#wistia_jq9vslkedz"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/fbc60cb44f6460c81a761fe37cb667b46f4f1602.jpg?&image_crop_resized=100x60" width="100" alt="How CDW Makes Every Ticket Count"><span class="wistia_bento_item_name">How CDW Makes Every Ticket Count</span></a>

  <a href="#wistia_qyx5135wzh"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/5293578ec9cd1793fc03ff7aef2ddcfba996e7ed.jpg?&image_crop_resized=100x60" width="100" alt="Providing the ROI of Comapny Sports Tickets"><span class="wistia_bento_item_name">Providing the ROI of Company Sports Tickets</span></a>

  <a href="#wistia_qdmez6tsor"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/0e6c3548db9d6f27e5b482f19ededf230f6f2b01.jpg?&image_crop_resized=100x60" width="100" alt="Putting your Tickets in Salesforce"><span class="wistia_bento_item_name">Putting your Tickets in Salesforce</span></a>

  <a href="#wistia_4j36xyw6cl"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/15cbe0b7232cb132c8ebf79c2e19b928db4ebe92.jpg?&image_crop_resized=100x60" width="100" alt="Building Your Own Ticket App"><span class="wistia_bento_item_name">Building Your Own Ticket App</span></a>                
      </div>
     </div>
    </div>

As you can see, the text doesn't wrap underneath itself, it wraps underneath the img thumbnails. I've tried everything I can think of, but no luck.

Can anyone help? Thank you in advance!

score 1 · Answer 1 · answered Jun 19 '19 at 04:19

You'll need to set the images to float: left (see this question for more information on why). That's going to do some weird things since your text isn't long enough to get to the bottom of the image so you'll need to clear the float too. The best way to do that is to use an :after on the span that contains the text. Here's one way to get it working:

#figcaption a img {
  display: block;
  margin: 0 5px 5px 0;
  float: left;
}

.wistia_bento_item_name:after {
  content: "";
  display: block;
  clear: both;
}

You'll also need to clean up a little bit of the other CSS that's going to cause things to look a little off (like removing the line-height: 0px; from the #video_player #figcaption a and removing the padding-left from the .wistia_bento_item_name).

dizzyramen · Accepted Answer · 2019-06-19T05:37:00.347

You just need to change your #video_player #figcaption a rule in css

what you've written is:

#video_player #figcaption a {
  display: block;
  font-size: 12px;
  line-height: 0px;
  border-bottom: 1px solid #e3e5eb;
  color: #000000;
  text-decoration: none;
  padding: 12px 12px 13px 12px;
}

what i'd like to do is change display: block; to display: flex; so that the img(video thumbnail) and span(video title) will be seperated as two individual flex items and also why are you trying to do line-height: 0px; ? this makes text overlap.

here's what i've changed:

#video_player #figcaption a {
      display: flex; /* change this */
      font-size: 12px; 
      /* line-height: 0px; remove this */
      border-bottom: 1px solid #e3e5eb;
      color: #000000;
      text-decoration: none;
      padding: 12px 12px 13px 12px;
    }

hope this helps! edit: img and span are inline elements(imagine that both img and span are a single element occupying a row) and the text that is unable to fit in the given width, will go to the next row

score 0 · Answer 3 · answered Jun 19 '19 at 04:48

I feel this is a btter way to do it! the caption is placed below the vid thumbnail which make it look perfect

 #video_player {
        display: table;
        margin: 0 auto;
        background: #000;
        max-width: 1140px !important;
        max-height: 360px !important;
    }

    #firstvideo {
        height: 100%;
    }

    #firstvideo iframe {
        height: 360px;
        width: 600px;
    }

    #video_player iframe, #video_player #figcaption {
        display: table-cell;
        vertical-align: top;
        background: #FFFFFF;
        overflow-y: scroll;
    }

    #video_player #figcaption {
        border: 2px solid #9aacd5;
        border-left: 0px;
    }

    #vidcontainer {
        height: 360px;
        width: 303px;
    }

    #video_player #figcaption a {
        display: block;
        font-size: 12px;
        border-bottom: 1px solid #e3e5eb;
        color: #000000;
        text-decoration: none;
        padding: 12px 12px 13px 12px;
    }

    #video_player #figcaption a:nth-of-type(7) {
        border-bottom: none;
    }

    #figcaption a:hover {
        background-color: #E3E5EB;
    }
    #figcaption a:selected {
        background: #406acb;
        color: white;
    }
    
    #figcaption a:img {
      display: block;
      margin: 0 5px 5px 0;
      float: left;
    }
 
    .wistia_bento_item_name {
        vertical-align: top;
        font-family: Arial;
        content: "";
        display: block;
        clear: both;
    }
     .wistia_bento_item_name:after {
        vertical-align: top;
        font-family: Arial;
        content: "";
        display: block;
        clear: both;
        }
    

    #video_player #figcaption::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    #video_player #figcaption::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
    }
    #video_player #figcaption::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #c1daec;
    }

<div id="video_player">
 <div id="firstvideo">
     <iframe src="//fast.wistia.net/embed/playlists/jswgmiwvqy" allowfullscreen></iframe>
 </div>
   <div id="figcaption">
  <div id="vidcontainer">
  <a href="#wistia_khpjv95u1u"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/5e9af872d0c0b2c36a90b650175f270eb8e3a306.jpg?&image_crop_resized=100x60" width="100" alt="The Future of Company Tickets"><span class="wistia_bento_item_name">The Future of Company Tickets</span></a>

  <a href="#wistia_rcyldd4352"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/56111fc6eed70ca28114e4a993b60a0b98919fc2.jpg?&image_crop_resized=100x60" width="100" alt="Company Tickets & the New Tax Law"><span class="wistia_bento_item_name">Company Tickets & the New Tax Law</span></a>

  <a href="#wistia_wo1fhqfjpf"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/a804723abfe40dc8d08c68a40720d1b665048a2d.jpg?&image_crop_resized=100x60" width="100" alt="How Anheuser-Busch Measures Sponsorship ROI"><span class="wistia_bento_item_name">How Anheuser-Busch Measures Sponsorship ROI</span></a>

  <a href="#wistia_jq9vslkedz"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/fbc60cb44f6460c81a761fe37cb667b46f4f1602.jpg?&image_crop_resized=100x60" width="100" alt="How CDW Makes Every Ticket Count"><span class="wistia_bento_item_name">How CDW Makes Every Ticket Count</span></a>

  <a href="#wistia_qyx5135wzh"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/5293578ec9cd1793fc03ff7aef2ddcfba996e7ed.jpg?&image_crop_resized=100x60" width="100" alt="Providing the ROI of Comapny Sports Tickets"><span class="wistia_bento_item_name">Providing the ROI of Company Sports Tickets</span></a>

  <a href="#wistia_qdmez6tsor"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/0e6c3548db9d6f27e5b482f19ededf230f6f2b01.jpg?&image_crop_resized=100x60" width="100" alt="Putting your Tickets in Salesforce"><span class="wistia_bento_item_name">Putting your Tickets in Salesforce</span></a>

  <a href="#wistia_4j36xyw6cl"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/15cbe0b7232cb132c8ebf79c2e19b928db4ebe92.jpg?&image_crop_resized=100x60" width="100" alt="Building Your Own Ticket App"><span class="wistia_bento_item_name">Building Your Own Ticket App</span></a>                
      </div>
     </div>
    </div>

This is not how you want but, Hope this will work for you You're good to go!!

Aligning text and wrapping it next to an image

3 Answers3