CODEWITHSUNDEEP
htmlcss
Mike Wills
Mike Wills

Reputation: 21265

Why doesn't padding-bottom work with inline-block?

I am working on creating a playlist display from our YouTube videos. I thought I had this working, but I am having some issues with how it displays. See code below.

If I used display: block the paragraph is next to the video like I want, but I can't add any padding after the video so that the videos don't together. When I use display: inline-block I can control the bottom padding, but then some videos will display next to each other.

What am I missing in my CSS?

    $(document).ready(function() {
      $.ajax({
        type: "GET",
        url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
        cache: false,
        dataType: "jsonp",
        success: function(json) {
          var entries = json.feed.entry;

          for (var i = 0; i < entries.length; i++) {
            $('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
          }
        }
      });
    });
    .videoElem {
      display: block;
      clear: both;
      padding-bottom: 25px;
    }
    .ytVideo iframe {
      float: left;
      padding-right: 10px;
    }
    @media only screen and (max-width: 648px) {
      .ytVideo iframe {
        width: 100%;
        height: 100%;
      }
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>

Upvotes: 0

Views: 106

Answers (2)

Oriol
Oriol

Reputation: 288170

The problem is that you are clearing the floats incorrectly. You can

  • Use clear: both on an element after the floats, but not to the container.

    .videoElem:after {
  content: '';
  display: table;
  clear: both;
}


    $(document).ready(function () {
  $.ajax({
    type: "GET",
    url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
    cache: false,
    dataType: "jsonp",
    success: function (json) {
      var entries = json.feed.entry;

      for (var i = 0; i < entries.length; i++) {
        $('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
      }
    }
  });
});
    .videoElem {
  display: block;
  padding-bottom: 25px;
}
.videoElem:after {
  content: '';
  display: table;
  clear: both;
}
.ytVideo iframe {
  float: left;
  padding-right:10px;
}
@media only screen and (max-width : 648px) {
  .ytVideo iframe {
    width:100%;
    height: 100%;
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>

  • Use overflow different than visible on the container:

    .videoElem {
    overflow: hidden;
}


    $(document).ready(function () {
  $.ajax({
    type: "GET",
    url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
    cache: false,
    dataType: "jsonp",
    success: function (json) {
      var entries = json.feed.entry;

      for (var i = 0; i < entries.length; i++) {
        $('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
      }
    }
  });
});
    .videoElem {
  display: block;
  overflow: hidden;
  padding-bottom: 25px;
}
.ytVideo iframe {
  float: left;
  padding-right:10px;
}
@media only screen and (max-width : 648px) {
  .ytVideo iframe {
    width:100%;
    height: 100%;
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>

Upvotes: 1

Alexei Darmin
Alexei Darmin

Reputation: 2129

In addition to inline-block you can make it width:100% to stop multiple videos from appearing on the same line.

.videoElem {
    display: inline-block;
    width:100%;
}

Is this what you wanted?

Upvotes: 1

Related Questions