What is the best way to align my cards side by side using html/css/js?

Check out this piece of HTML code I have:

<div class="container">
  <div class="column">
    <div class="post-module">
      <!-- Inserting content here -->
    </div>
    <div class="post-module">
      <!-- Inserting content here -->
    </div>
    <div class="post-module">
      <!-- Inserting content here -->
    </div>
  </div>
</div>

And take a look at the associated CSS styles:

body {
  background: #f2f2f2;
  font-family: 'proxima-nova-soft', sans-serif;
  font-size: 14px;
}
.post-module {
  position: relative;
  z-index: 1;
  display: block;
  background: #FFFFFF;
  min-width: 270px;
  height: 470px;
  /* Other styling attributes */
}
/* Additional CSS rules here */

Here's what I'm encountering with the current layout:

Screenshot of issue

The cards are currently stacked directly on top of each other, but I want them to align horizontally like this:

Desired layout

I've tried using float and display properties without success. Any suggestions on how to resolve this? Feel free to view the code on CodePen for reference: CodePen link

htmljquerycsswebdesign-patterns

Answer №1

To achieve a layout where cards are displayed next to each other, you can apply the display: flex and justify-content: space-between properties to the .column class. Additionally, consider adding margin: 0 (x)px to the .post-module class to create spacing between the cards.

If you wish to increase the size of the cards, remember to delete either the width: 50% property in .column or the max-width: 50% property in .container.

For an example of cards displayed side by side after implementing these changes, check out this illustration. You can further adjust the card sizes by removing width restrictions.

Alternatively, using the float-left property on the .post-module class instead of .column can also achieve a similar result. Ensure that the total width of all three cards is less than the column width to maintain them in a single row. In cases where there isn't enough room, the cards will naturally flow into separate rows.

Answer №2

If you're looking to achieve a different layout without using flex, consider adjusting the width of the post-module element. This will allow you to display more or fewer items per row as needed.

.container .column {
    padding: 0 25px;
    text-align: left;
    -webkti-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.post-module {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    width: 31%;
    display: inline-block;
    margin: 5px;
    background: #FFFFFF;
    height: 470px;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

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

Selenium keeps displaying the error "Error: element is not clickable" while attempting to input text

I have been trying to automate interactions with elements on Soundcloud's website using Selenium, but I am facing difficulties when attempting to interact with the input tags. Whenever I try to write in the input tag with the class "headerSearch__inpu ...

pythonseleniumwebweb-scrapingbots

step-by-step guide for using Ajax to bind the pageshow event in jQuery Mobile

I am interested in utilizing jQuery and jQuery mobile to bind events to my webpage, but I am having trouble understanding the correct procedure. Despite randomly binding events to my documents, they continue to execute the binding function properly. You ca ...

jqueryjquery-mobile

The function is triggered only on resize, not on initial load

Is there a way to ensure that the carouselPartialView function runs automatically when the page loads? I've noticed that it doesn't run when directly called, but works fine when called with the resizeWitdthOnly function. How can I make sure it ru ...

javascriptjquery

Pressing the submit button will trigger the execution of a .php script, which will then generate a popup on the screen and refresh a specific part of

I have a select form and submit button on my page, which are dynamically generated based on entries in the database. Here is the HTML output: <div id="structures"> <h1>Build</h1> <form name="buildForm" id="buildForm" method="POST" ons ...

phpjavascriptjqueryajax

Substitute all instances of <table> with <div> tags, making sure to include specifications for

Currently, I find myself immersed in a project that relies heavily on tables, which isn't exactly ideal but is what the marketing department insists upon... To tackle this issue, I have implemented jQuery to convert all tables into DIVs, and so far, ...

javascripthtmlhtml-table

JavaScript code using jQuery's ajax method is sending a request to a PHP server, but

Attempting to utilize jQuery ajax for PHP call and JSON return. The test is quite simple, but only receiving an empty object in response. No PHP errors appearing in the LOG File. jqXHR is recognized as an object with 'alert', yet not displayin ...

javascriptphpjqueryajaxjson

Creating tabbed content with a classless CSS design by utilizing radio buttons instead of the traditional unordered

I am attempting to transform the classless CSS and HTML provided below from a list format to using radio buttons and labels for tabbed content. My goal is to make it concise and avoid redundancy. Here is the setup of what I am aiming for: <nav> ...

htmlcss

Locate a specific element by utilizing xpath

Recently, I encountered a coding issue that has been puzzling me. Here's the html snippet in question: <div class="Main"> <div> <div class="display">First:</div> <div class="price">$0.01</div> ...

javahtmlseleniumxpath

Nested elements not transitioning using CSS

Why is my transition not being applied to the submenu <a> tag? The color change is working fine, but the transition does not occur on hover. When I use the same rules on another element with a different main class, it works perfectly. It seems like t ...

htmlcsscss-transitions

Switching between pages and updating the URL without needing to refresh the page, while still maintaining the content even after a refresh

After experimenting with jQuery's load() method to dynamically change content without refreshing the page, I encountered a recurring issue: the URL remains unchanged. Even when attempting to use history.pushState() to modify the URL, the problem pers ...

javascriptjqueryajaxloadrefresh

Retrieving input field values in JS/Ajax without needing to refresh the page or click a button

Currently, I have set up a JavaScript function that submits data without refreshing the page or requiring a button click. The input field is located within tab #2 and triggers the JS function when the user stops typing. However, the issue arises when the ...

javascriptjqueryajax

Inheriting vertical height and alignment (inline-block)

I struggle to understand how these things work and I would greatly appreciate it if someone could provide an explanation. 1 http://d.pr/i/6TgE+ why http://d.pr/i/UAZn+ *it's actually 9. Here is the code snippet: <header> <div class=" ...

htmlcss

The error message "ReferenceError: $ is not defined" is displayed within

My current requirement involves loading templates within an iframe, and to achieve this, I have implemented the following code: <div class="col m8 l8 s12 margin-top-30" id="hue-demo-bg-div"> <iframe id="myiframe" src="/themes/{{$themeid}}.ht ...

javascriptjqueryhtmliframe

Submitting a file using Ajax XMLHttpRequest

Currently, I am facing an issue while attempting to send a file using the following XMLHttpRequest code. var url= "http://localhost:80/...."; $(document).ready(function(){ document.getElementById('upload').addEventListener('cha ...

javascriptajaxjqueryfile-uploadxmlhttprequest

Some characters are not compatible with the CSS writing-mode feature

There seems to be an issue with the CSS writing mode not applying correctly to the symbol '№'. Here is an example: <html> <head></head> <body> <p style="writing-mode: vertical-lr;"> Номер № ...

css

How to send PHP email using HTML form

After attempting to find an answer to my inquiry here, I am now starting a new thread. Just a brief explanation: I have a Contact Form with 180 input fields and calculations for each field. I wish to send all the fields along with the calculated values v ...

phphtmlemail

Tips for substituting @media (max-width) with Stylish or Greasemonkey?

I am encountering an issue when trying to access this specific website on my desktop browser. The site has a responsive/fluid design that switches to displaying a mobile menu button instead of a horizontal nav-bar when the browser width is less than 990px. ...

cssgreasemonkeytampermonkeystylish

Experience a seamless transition as the background gently fades in and out alongside the captivating text carousel

I have a concept that involves three background images transitioning in and out every 5 seconds. Additionally, I am utilizing the native bootstrap carousel feature to slide text in synchronization with the changing background images. Solving the Issue ...

javascripthtmljquerycssbootstrap-4

When using jQuery's `.click()` method on an element to collapse it with the 'show' parameter set to false, the disabling action will only take effect after the document

When you first run the program and click anywhere on the body, it activates the collapse element. I want it to only collapse the accordion on click, not show it immediately. Currently, it will deactivate only after it is hidden once. HTML <!DOCTYPE ht ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transfer the array using Ajax to a PHP script

I have an array generated using the .push function that contains a large amount of data. What is the most effective way to send this data to a PHP script? dataString = ??? ; // Is it an array? $.ajax({ type: "POST", url: "script.php" ...

phpjavascriptjqueryajax