Arranging elements in a 2x2 card grid fashion

I am currently working on an HTML website and struggling with aligning elements properly. At the moment, my page layout resembles this image here, but what I really want is for it to look like this one here. My goal is to set up a 2 by 2 grid, and I'm not sure which part of the code is causing the issue of not being able to display two elements side by side.

Your assistance in solving this challenge would be greatly appreciated!

<title></title>
<style type="text/css">body {

  color: #404040;
  font-size: 14px;

  line-height: 22px;


  padding-top: 20px;
}

.card {
  display: inline-block;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
  margin: 5px;
  position: relative;
  margin-bottom: 50px;
  transition: all .2s ease-in-out;
}

.card:hover {
  /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  margin-bottom: 54px;
}

.image {
  height: 200px;
  opacity: .7;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.image:hover,
.card:hover .image {
  height: 200px;
  opacity: 1;
}

.text {
  background: #FFF;
  padding: 20px;
  min-height: 200px;
}

.text p {
  margin-bottom: 0px;
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  margin-top: -50px;
  right: 20px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
  background: #0066A2;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

.fab:hover {
  background: #910500;
  cursor: pointer;
  -ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>

htmlcss

Answer №1

Here is the corrected version of the code:

<title></title>
<style type="text/css">
body {

    color: #404040;
    font-size: 14px;

    line-height: 22px;


    padding-top: 20px;
}

.card {
    display: inline-block;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
    margin: 5px;
    position: relative;
    margin-bottom: 50px;
    transition: all .2s ease-in-out;
}

.card:hover {
    /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    margin-bottom: 54px;
}

.image {
    height: 200px;
    opacity: .7;
    overflow: hidden;
    transition: all .2s ease-in-out;
}

.image:hover,
.card:hover .image {
    height: 200px;
    opacity: 1;
}

.text {
    background: #FFF;
    padding: 20px;
    min-height: 200px;
}

.text p {
    margin-bottom: 0px;
}

.fab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    margin-top: -50px;
    right: 20px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 48px;
    line-height: 48px;
    text-align: center;
    background: #0066A2;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}

.fab:hover {
    background: #910500;
    cursor: pointer;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.row {
    display: flex;
}
</style>

<div class="container">
<div class="row">

    <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
        <div class="card">
            <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

            <div class="text">
                <div class="fab">+</div>

                <h3>Our Community</h3>

                <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
        <div class="card">
            <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

            <div class="text">
                <div class="fab">+</div>

                <h3>Our Community</h3>

                <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
            </div>
        </div>
    </div>
</div>
</div>

<div class="container">
<div class="row">
    <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
        <div class="card">
            <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

            <div class="text">
                <div class="fab">+</div>

                <h3>Our Community</h3>

                <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
        <div class="card">
            <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

            <div class="text">
                <div class="fab">+</div>

                <h3>Our Community</h3>

                <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
            </div>
        </div>
    </div>
</div>

Answer №3

To ensure that multiple div elements are displayed inline, various CSS properties such as display: inline-block, float: left, using tables, display: table, display: table-cell, flexbox, and more can be utilized. Below is a straightforward example:

body * {
  box-sizing: border-box; /* particularly beneficial for responsive design */
}
.container {
  width: 100%;
  float: left; /* may not always be necessary, depending on the layout */
}
.card {
  width: 50%;
  float: left;
  padding: 10px;
}
.card:nth-child(:nth-child(2n+1) {
  clear: left
}

Answer №4

If you examine the example provided below, you will notice how your objective can be attained:

.container {
  display: flex;
  flex-wrap: wrap;
}

.element {
  height: 100px;
  flex-basis: 50%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.cyan {
  background-color: cyan;
}
<div class="container">
  <div class="element red">item 1</div>
  <div class="element blue">item 2</div>
  <div class="element green">item 3</div>
  <div class="element cyan">item 4</div>
</div>

Answer №5

I hope this assists you.

body {
  color: #404040;
  font-size: 14px;
  line-height: 22px;
  padding-top: 20px;
}

.card {
  display: inline-block;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
  margin: 5px;
  position: relative;
  margin-bottom: 50px;
  transition: all .2s ease-in-out;
}
  
.card:hover {
  /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  margin-bottom: 54px;
}

.image {
  height: 200px;
  opacity: .7;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.image:hover,
.card:hover .image {
  height: 200px;
  opacity: 1;
}

.text {
  background: #FFF;
  padding: 20px;
  min-height: 200px;
}

.text p {
  margin-bottom: 0px;
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  margin-top: -50px;
  right: 20px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
  background: #0066A2;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

.fab:hover {
  background: #910500;
  cursor: pointer;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/darkly/bootstrap.min.css">
<div class="container">
  <div class="row">

    <div class="col-md- col-lg-6 col-xs-6 col-sm-6">
      <div class="card">
        <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

        <div class="text">
          <div class="fab">+</div>

          <h3>Our Community</h3>

          <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6">
      <div class="card">
        <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

        <div class="text">
          <div class="fab">+</div>

          <h3>Our Community</h3>

          <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
        </div>
      </div>
    </div>


  </div>
</div>

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

script to pause video using jQuery

I have a script that works perfectly, but currently it only stops an instance of a playing video if a new video is started. I want to modify the script so that ALL instances of playing videos are stopped when the function stopAllButMe(); is called. Can s ...

javascriptjqueryhtmlvideo

Tips for creating a sub-menu within a dropdown menu

I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...

htmlcsstemplatesdrop-down-menusubmenu

Speeding up the loading time of my background images

body { background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed; background-size:100% auto; } I have unique background images on each of my sites, but they are large in size and take some time to load due to bein ...

javascripthtmlimagecss

What is the best way to ensure that the text input spans the entire width of the div in Bootstrap 4?

I am currently exploring the implementation of Bootstrap 4. I have a basic div that includes a text box, and my goal is for the text box to occupy the full width of the div. Initially, I assumed that in Bootstrap, input elements automatically inherit the f ...

csshtmlinputbootstrap-4

Trying to extract data from the ASX website's table using web scraping techniques

My goal is to extract the current stock value from the ASX.com.au website. Specifically, I am interested in retrieving the current ASX value, which can be located here. The value I am looking for is in the second td from the left, currently standing at 30 ...

phpjavascriptjqueryhtml

Preventing Canvas Image Disappearance with JavaScript's onload Event

My current issue involves adding an Image to my webpage. However, every time I hit the refresh button, the image disappears. After researching on Stack Overflow, it was suggested to include window.onload=yourDrawFunction() in the code. Despite following th ...

javascripthtmlcsscanvas

What is the best way to horizontally align Bulma's level items on smaller screens?

My website's footer features a level layout with left and right sections that follow the guidelines provided in theBulma docs. Everything looks good on larger screens. However, on smaller screens, all items in the right section are stacked vertically ...

cssbulma

The sluggish loading speed of the page is being caused by both jQuery and an external file containing Amazon

I am facing an issue with my website where it is loading over 1000 images per page from Amazon servers. To enhance the functionality, I have integrated jQuery plugins that are stored locally on the webserver, without using any remote JS or CSS. However, ...

javascriptjqueryhtmlcssamazon-web-services

Updating website content dynamically using Javascript and JSON-encoded data

My programming code seems to be acting oddly. I have structured my data in a JSON object as follows: injectJson = { "title": "Champion Challenge Questions", "rules": [ { "idChrono": "chrono-minute", "text": "Top is missing!", ...

javascripthtmljsonvariablesundefined

What could be causing me to receive null when trying to retrieve an element with document.getElementById, even after invoking $(document).ready(function() { ... })?

Here's a small example. I'm feeling a bit rusty with JavaScript, as it's been some time since I last worked with it. The problem I'm encountering is an error in Chrome developer tools: "Uncaught TypeError: Cannot set property 'src ...

javascriptjqueryhtml

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...

css

Creating dynamic scrolling effects using windows.scrollBy in JavaScript

Currently, I am using window.scrollBy in the following way: <script> function scrollWindowup() { window.scrollBy(0,700) } function scrollWindowdown() { window.scrollBy(0,-700) } </script> I am wondering if there is a way to animate th ...

javascriptjqueryhtmljquery-animate

Calculating the total number of records in a MySQL database using PHP can be achieved by

I need help with counting all rows in a dataset and displaying the number as part of a small statistic later on. Currently, I'm facing an issue where my PHP code is not returning the correct number of rows. The HTML echo works fine when displaying te ...

phphtmlmysql

Is it possible to supersede the pre-set validation of the html5 input types for url and email?

When using the input type url in html5, what are the default rules for a valid URL? If a custom pattern attribute is also specified along with the type, will it override the default validation rules? For example, in the line below, will the pattern attribu ...

htmlvalidation

How can I incorporate a search bar or similar feature on my website that mimics the functionality of Ctrl+F?

Is there a way to incorporate a search bar on certain pages of my website that functions similarly to the Ctrl+F feature in Google Chrome? Essentially, I am looking for a "find" function that searches the entire page(s). My site is built using WordPress, ...

htmlwebbrowser

Allowing horizontal scrolling in a table cell set to full width

I'm attempting to achieve the desired outcome by utilizing the code provided at What I'd like to know is why the scrolling function isn't working as expected. Instead of scrolling, it simply expands the table. To see the difference, try run ...

htmlcsscss-tables

Altering the hue within text/typography

While I may not be a professional web developer, I've successfully created an HTML5 and CSS3 website by piecing together information from various tutorials and conducting Google searches to hack code. My website aims to showcase environmental data in ...

javascriptphphtmlcssweb

What is the method for overlaying an image and having it expand to fit the parent container using flexbox?

I'm working on styling an HTML element where I want the txt-box div to be centered within its container, overlaying an image while expanding to fill the container. The goal is for it to have a margin of equal width on all sides, creating a border-like ...

htmlcssflexbox

Extracting information from the database using PUG

There is a situation with the data in my mongo database that I can't seem to control. When exporting data from my application to the database, it seems to update the html tags (I believe the term is 'encoding' but I am not entirely sure). &a ...

htmlmongodbpug

The information from the textarea and select option is not getting through to the email

Despite following suggestions, I am still unable to figure out why my form is not functioning properly. The form I have collects various information such as name, email, phone number, a select option, and a message in a textarea input. I dynamically change ...

javascriptphphtmlformstextarea