Home Why is my 2nd thumbnail coming under the first one? i used inline block but its still coming down

Questions

Why is my 2nd thumbnail coming under the first one? i used inline block but its still coming down

November 11, 2022

I am very new to coding and was trying to build this youtube clone i saw on the internet but im stuck. I cant understand whats happenhing.I literally did the same thing he did in the video. But somehow my block of the second video keeps coming under the first one instad of coming at the right of it. I know this is a dumb and a laughable question but i need help asap so i can move onto the next steps.

<!DOCTYPE html>
<HTML>
    <head>

      <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<title>youtube.com clone</title>
<style>
p{
  font-family:roboto,ariel;
  margin-top:0;
  margin-bottom:0;
}
.searchbar{
  display:block;
}

.video-preview{
  width:300px;
  display:inline-block;
  vertical-align: top;
  margin-right:15px;
}

.thumbnail {
width:300px;
}

.video-title{
  margin-top:0;
  font-size:14px;
  font-weight:500;
  line-height:20px;
  margin-bottom:12px;

}


.channel-picture{

  display:inline-block;
  vertical-align: top;
  width:50px;
}

.video-info{
  display:inline-block;
  width:200px;
}

.profile-picture{
width:40px;
border-radius: 50%;

}

.thumbnail-row{
  margin-bottom:12px;
}

.video-author,.video-stats{
  font-size:12px;
  color:rgb(96,96,96);
}

.video-author{
  margin-bottom:4px;
}


</style>
  </head>
       
    
    <body>
      <input class="searchbar" type="textbox" placeholder="search">
            
<div class="video-preview">
  <div class="thumbnail-row"> 
<img class="thumbnail" src="thumbnails/thumbnail-1.webp">
  </div>
  <div class="channel-picture">
    <img class="profile-picture"src="channel-pictures/channel-1.jpeg"> </div>
<div class="video-info">
 <p class="video-title">
    Talking Tech and AI with Google CEO Sundar Pichai!
 </p>
<p class="video-author">
Marques Brownlee
</p>
<p class="video-stats">
3.4M views · 6 months ago
</p>
</div>

<div class="video-preview">

  <img class="thumbnail" src="thumbnails/thumbnail-2.webp">


<p class="video-title">
    
Try Not To Laugh Challenge #9
</p>
<p class="video-author">
Markiplier
</p>

<p class="video-stats">
  19M views · 4 years ago
</p>

</div>

     </body>
    
</HTML>

i was expecting it to come at the side . can someone explain to me what i did wrong? and why is my block coming down instead of coming at the right side of the other one?

>Solution :

Your principal issue is that you didn’t close the first video-preview div, so the other one was its child. About my portion of code added (a container) you can research more about Flex containers with this funny game or reading the proper docs.

I attached a working snippet as example.

Note: I replace the images so we can run in my snippet.

<!DOCTYPE html>
<HTML>

<head>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <title>youtube.com clone</title>
  <style>
    p {
      font-family: roboto, ariel;
      margin-top: 0;
      margin-bottom: 0;
    }
    
    .searchbar {
      display: block;
    }
    
    .video-preview {
      width: 300px;
      display: inline-block;
      vertical-align: top;
      margin-right: 15px;
    }
    
    .thumbnail {
      width: 300px;
    }
    
    .video-title {
      margin-top: 0;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      margin-bottom: 12px;
    }
    
    .channel-picture {
      display: inline-block;
      vertical-align: top;
      width: 50px;
    }
    
    .video-info {
      display: inline-block;
      width: 200px;
    }
    
    .profile-picture {
      width: 40px;
      border-radius: 50%;
    }
    
    .thumbnail-row {
      margin-bottom: 12px;
    }
    
    .video-author,
    .video-stats {
      font-size: 12px;
      color: rgb(96, 96, 96);
    }
    
    .video-author {
      margin-bottom: 4px;
    }
    
    /* New code*/
    .video-container {
      display: flex;
    }
  </style>
</head>


<body>
  <input class="searchbar" type="textbox" placeholder="search">
  <div class="video-container">
    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="https://picsum.photos/300/200?random=1">
      </div>
      <div class="channel-picture">
        <img class="profile-picture" src="https://picsum.photos/300/200?random=1"> </div>
      <div class="video-info">
        <p class="video-title">
          Talking Tech and AI with Google CEO Sundar Pichai!
        </p>
        <p class="video-author">
          Marques Brownlee
        </p>
        <p class="video-stats">
          3.4M views · 6 months ago
        </p>
      </div>
    </div>
    <div class="video-preview">
      <img class="thumbnail" src="https://picsum.photos/300/200?random=1">
      <p class="video-title">
        Try Not To Laugh Challenge #9
      </p>
      <p class="video-author">
        Markiplier
      </p>
      <p class="video-stats">
        19M views · 4 years ago
      </p>
    </div>
  </div>
  
</body>

</HTML>