What is the best way to arrange these containers in a horizontal stack?

Check out the code snippet at: https://codepen.io/shayaansiddiqui/pen/YzGzeOj

I'm looking to align these boxes horizontally, how can I achieve that?

    <div>
        <div class="container">
            <img src="#" alt="Norway" style="width:100%;">
            <div class="text-block">
            <h4>Video 1</h4>
            <p>By YouTube Star</p>
            </div>
        </div>
        <div class="container">
            <img src="#" alt="Norway" style="width:100%;">
            <div class="text-block">
            <h4>Video 2</h4>
            <p>By Another YouTube Star</p>
            </div>
        </div>
        <div class="container">
            <img src="#" alt="Norway" style="width:100%;">
            <div class="text-block">
            <h4>Video 3</h4>
            <p>By Jason Bourne</p>
            </div>
        </div>
    </div>
htmlcss

Answer №1

Take a look at this example utilizing flex. I've omitted the navigation and title and incorporated placeholder images.

img {
    height: 300px;
    width: 300px;
}

.container {
    position: relative;
    max-width: 250px;
}

.text-block {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color:#ef21219f;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    width: 150px;
}

#flex{
  display: flex;
}
<div id="flex">
  <div class="container">
      <img src="https://via.placeholder.com/300" alt="Norway" style="width:100%;">
      <div class="text-block">
        <h4>Video 1</h4>
        <p>By YouTube Sensation</p>
      </div>
  </div>
  <div class="container">
      <img src="https://via.placeholder.com/300" alt="Norway" style="width:100%;">
      <div class="text-block">
        <h4>Video 2</h4>
        <p>By Another YouTube Star</p>
      </div>
  </div>
  <div class="container">
      <img src="https://via.placeholder.com/300" alt="Norway" style="width:100%;">
      <div class="text-block">
        <h4>Video 3</h4>
        <p>By John Wick</p>
      </div>
  </div>
</div>

Note - It's recommended to view the code snippet in full-screen mode for optimal presentation due to potential layout issues in smaller screens caused by styling.

Answer №2

When it comes to CSS,

.wrapper{
display : inline-block;
}

This code snippet is essential for achieving the desired layout.

To add some extra flair,

Width : 30%;
margin: 0px 1%;
verical-align: top;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason behind Flex making several images decrease in size?

I'm trying to set up a carousel of images with Tailwind CSS, where 5 identically sized images are displayed next to each other and can be scrolled left and right. When I imported the images without using Flex, they fit the max-width that I had specifi ...

htmlcssflexboxtailwind-css

The switch statement remains unchanged for varying variables

Here is some code that I am working with: updateTable(selectedIndex) { console.log("running updateTable function"); let level = ''; // if (selectedIndex == 1){ // this.setState({level: 'day'}) // th ...

javascripthtmlreactjsswitch-statement

Increasing the size of iframe in a Flexbox layout

I'm facing a challenge in making the iframe element stretch to occupy the remaining space within my web application. While I have ensured that the maximum space is allocated for the div by setting a border, the iframe's height does not automatica ...

htmlcssiframeflexbox

Can you tell me if there is a switch available for hover or mouse enter/mouse leave functions?

I have a series of div elements, each containing several nested div elements. I would like to add hover effects to these div elements. However, I am unsure whether to use the hover or mouseenter function. For instance, when hovering over a div, I want it t ...

javascriptjqueryhtmlcss

Ensure the placeholder remains front and center, growing in size as it moves vertically

.inpsearch{ border:2px solid #bbb; border-radius:14px; height:29px; padding:0 9px; } .inpsearch::-webkit-input-placeholder { color: #ccc; font-family:arial; font-size:20px; } <input type='search' class='inpsea ...

htmlcssplaceholder

Creative CSS Techniques: Styling Initial Capital Letters (Drop Caps) in a CSS3 Multicolumn Layout

For the past year, the multicolumn css3 property has grown in popularity among different browsers. It's a good reason to consider implementing it on your website for improved design and readability. I decided to take it a step further and incorporate ...

csslayoutmultiple-columns

Hover over the text to reveal its content

I am currently in the process of developing a website that features interactive images with text appearing when hovered over. This concept is inspired by the functionality on the nowthisnews.com site. Despite my efforts, I have been unable to get this fea ...

htmlcss

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

How can I create a navigation bar that disappears when scrolling, with a smooth animation? This is the progress I have made so far. HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="tex ...

javascriptjqueryhtmlcssnavigation

Using the JQuery Library, you can implement two submit buttons that either open in a new tab or submit

I am facing a situation where I have a FORM containing two submit buttons. My requirement is that when the first button is clicked, the form should submit on the same tab. On the other hand, if the second button is clicked, it should proceed to open a new ...

phpjqueryhtml

Modify CSS using Javascript by targeting the class of ".modalDialog > div {}"

I am currently working on a project that involves creating a Modal Layer using CSS. I have successfully implemented the modal layer, but now I need to figure out how to change the width from the default 400px to something else when I open it with Javascrip ...

javascriptcss

I'm looking to create a Triangle shape with CSS, any tips on how to achieve

Similar Question: Understanding the mystery behind this CSS triangle shape Please provide me with your valuable suggestions. ...

htmlcss

Unable to Send Messages through HTML Email Form

I have recently obtained a Bootstrap website template and I am facing an issue with the functionality of the form that is supposed to send messages to my email. Despite filling in all the required fields, the message confirms submission but no actual email ...

phphtmltwitter-bootstraphtml-email

variations in menu functionality on firefox

Could you please take a look at the links below? It appears that there may be an issue with FireFox. The green top menu seems to be displaying incorrectly. In Chrome/IE, it appears in one line, but in FF, the last two links are on the second line despite s ...

htmlcss

Utilize the power of Vuejs' v-for directive to populate not only the table rows, but also its header with

Can a single object be used to populate both table headers and rows? I attempted to do so with the code below: <table v-for="(table, index) in tables" :key="index"> <thead> <tr> <th> {{ table. ...

htmlvue.jsloopshtml-tablev-for

The error message "email() is not a valid function when using the onclick attribute

Can anyone lend a hand? I feel like I must be overlooking something really obvious. I'm having trouble calling my function to execute my ajax call. Any assistance would be greatly appreciated. Thank you! Here is an excerpt of the HTML code: $(docu ...

javascriptjqueryhtmlajax

Switch up your code and toggle a class on or off for all elements that share a specific class

I've been attempting to create a functionality where, upon clicking a switch, a specific class gets added to every element that is assigned the class "ChangeColors". Unfortunately, I have encountered some difficulties in achieving this task. The error ...

javascriptcss

Volkswagen elements spilling over

Why are two divs overlapping each other? I have divided the two divs equally with viewport width. When I set the width to 49% instead of 50%, the code works fine. Why is that? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcss

Here is a guide on determining the date variance in PHP by leveraging jQuery

I have been attempting to use the jQuery change function to calculate the variance between two dates, but I am encountering a problem as the code seems to be running smoothly without returning any results... <input type="text" name="datte1" class="form ...

phpjqueryhtmlajax

Troublesome behavior from Bootstrap's datepicker

Recently, I decided to dive into front-end development using Bootstrap but I'm facing some challenges. There are two issues here. The calendar glyph is appearing under the date input field instead of at the end of it on the same line. The picker is ...

jquerycssbootstrap-4responsive-design

Maintain the menu item color even after clicking

Here is the menu code snippet: <div class="header"> <div id="logo"></div> <ul class="menu"> <li><a href="/index.aspx">Home</a></li> <li><a href="/about.aspx"& ...

csshtml