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

Question

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>

Answer 1

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?

Answer 2

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>