My goal is to display a grid of videos on my website, maximizing the number of videos per row. I envision a navigation area on the left side and the videos positioned next to it.
However, I'm facing an issue where the videos are being placed below the navigation instead of alongside it. I've tried various solutions like using display: inline-block; but nothing has worked so far.
What am I missing here?
<div id="content_wrapper">
<div id="navigation_area"></div><!-- end of navigation area -->
<div id="video_area">
<div class="video_container">
<div class="video_thumb"></div>
<div class="video_info_container">
<div class="video_name">Video Name 1</div>
<div class="rating_container">
<div class="rating"></div>
</div>
</div>
</div><!-- end of video_container -->
<div class="video_container">
<div class="video_thumb"></div>
<div class="video_info_container">
<div class="video_name">Video Name 2</div>
<div class="rating_container">
<div class="rating"></div>
</div>
</div>
</div><!-- end of video_container -->
</div><!-- end of video_area -->
</div><!-- end of content_wrapper -->
CSS:
#navigation_area{
height:500px;
width:100px;
background-color:#ffffff;
border-radius: 15px;
-moz-border-radius: 15px;
margin:2px;
}
#video_area{
float: left;
}
.video_container{
width: 400px;
height: 300px;
background-color: #ffffff;
margin-left: 20px;
margin-top: 20px;
border-radius: 15px;
-moz-border-radius: 15px;
float: left;
display: inline;
}