It is impossible for 4 div elements to align in a horizontal position

Having an issue where I am trying to align 4 boxes horizontally like cards, but they are appearing in a staircase formation instead. Any help would be appreciated.

I have provided the code with the issue on this jsfiddle link

                #first {
                    display: flex;
                    justify-content: center;
                    margin-left:10px;
                    margin-top:20px;
                }
htmlcssflexbox

Answer №1

Give this a try: DEMO

Instead of removing the first, second, third, and fourth elements from the CSS, add the following styles below the .card-container class:

.card-container {
    float: left;
    width: calc(100%/4);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    align-content: center;
}


body {
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
}
h1 {
margin:0;
}

.card-container {
perspective:700;
}
.card {
position:relative;
color:white;
text-align:center;
line-height:200px;
margin:20px;
width:200px;
height:200px;
transition:all 0.6s ease;
transform-style:preserve-3d;
}
.front, .back {
background-color:#5677fc;
position:absolute;
top:0;
left:0;
width:200px;
height:600px;
backface-visibility:hidden;
}
.back {
transform:rotateY(180deg);
}
.card:hover {
transform:rotateY(180deg);
}
      .card-container {
    float: left;
    width: calc(100%/4);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    align-content: center;
}
<body>
    <div class="card-container" id="first">
    <div class="card">
            <div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>
        
        <div class="card-container" id="second">
    <div class="card">
            <div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>
        
        <div class="card-container" id="third">
    <div class="card">
            <div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>
        
        <div class="card-container" id="forth">
    <div class="card">
            <div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>
    </body>

Answer №2

Eliminate the first, second, third, and fourth instances from the CSS code, and instead place them underneath the .card-container selector.

.card-container {
    display: flex;
    justify-content: center;
    margin-top:20px;
}

You can view the outcome here.

I hope this is helpful!

Answer №3

To achieve the desired layout, all you need is a single container styled as flexbox.

.card-container {
  display: flex;
  perspective: 700;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
}

h1 {
  margin: 0;
}

.card {
  position: relative;
  color: white;
  text-align: center;
  line-height: 200px;
  margin: 20px;
  width: 200px;
  height: 200px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front,
.back {
  background-color: #5677fc;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 600px;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

.card:hover {
  transform: rotateY(180deg);
}
<div class="card-container">
  <div class="card">
    <div class="front">
      <h1>hello</h1>
    </div>
    <div class="back">
      <h1>Goodbye</h1>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <h1>hello</h1>
    </div>
    <div class="back">
      <h1>Goodbye</h1>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <h1>hello</h1>
    </div>
    <div class="back">
      <h1>Goodbye</h1>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <h1>hello</h1>
    </div>
    <div class="back">
      <h1>Goodbye</h1>
    </div>
  </div>
</div>

Answer №4

To achieve a horizontal alignment of all card containers, you can simply enclose them in a new container and utilize flexbox:

View the working example here.

Below is the code snippet:


<div class="container">
    <div class="card-container" id="first">
        <div class="card">
            <div class="front"><h1>hello</h1></div>
            <div class="back"><h1>Goodbye</h1></div>
        </div>
    </div>

    <div class="card-container" id="second">
        <div class="card">
            <div class="front"><h1>hello</h1></div>
            <div class="back"><h1>Goodbye</h1></div>
        </div>
    </div>

    <div class="card-container" id="third">
        <div class="card">
            <div class="front"><h1>hello</h1></div>
            <div class="back"><h1>Goodbye</h1></div>
        </div>
    </div>

    <div class="card-container" id="forth">
        <div class="card">
            <div class="front"><h1>hello</h1></div>
            <div class="back"><h1>Goodbye</h1></div>
        </div>
    </div>
</div>

CSS:


body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
}
h1 {
    margin:0;
}
#first {
    display: flex;
    justify-content: center;
    margin-left:10px;
    margin-top:20px;
}
#second {
    display: flex;
    justify-content: center;
    margin-left:220px;
    margin-top:20px;
}
#third {
    display: flex;
    justify-content: center;
    margin-left:430px;
    margin-top:20px;
}
#forth {
    display: flex;
    justify-content: center;
    margin-left:640px;
    margin-top:20px;
}
.card-container {
    perspective:700;    
}
.card {
    position:relative;
    color:white;
    text-align:center;
    line-height:200px;
    margin:20px;
    width:200px;
    height:200px;
    transition:all 0.6s ease;
    transform-style:preserve-3d;
}
.front, .back {
    background-color:#5677fc;
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:600px;
    backface-visibility:hidden; 
}
.back {
    transform:rotateY(180deg);                  
}
.card:hover {
    transform:rotateY(180deg);
}

.container {
    display: flex;
    flex-direction: row;
}

Answer №5

Check out the following CSS code snippet:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  line-height: 60px
}

h1 {
  margin: 0;
  padding-top: 50px
}

.card-container {
  perspective: 700;
  float: left;
  width: 25%;
  word-break: break-word;
}

.card {
  position: relative;
  color: white;
  text-align: center;
  margin: 20px;
  width: 100%;
  height: 200px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front,
.back {
  background-color: #5677fc;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

.card:hover {
  transform: rotateY(180deg);
}
<div class="card-container" id="first">
    <div class="card">
      <div class="front">
        <h1>hello</h1></div>
      <div class="back">
        <h1>Goodbye</h1></div>
    </div>
  </div>

  <div class="card-container" id="second">
    <div class="card">
      <div class="front">
        <h1>hello</h1></div>
      <div class="back">
        <h1>Goodbye</h1></div>
    </div>
  </div>

  <div class="card-container" id="third">
    <div class="card">
      <div class="front">
        <h1>hello</h1></div>
      <div class="back">
        <h1>Goodbye</h1></div>
    </div>
  </div>

  <div class="card-container" id="forth">
    <div class="card">
      <div class="front">
        <h1>hello</h1></div>
      <div class="back">
        <h1>Goodbye</h1></div>
    </div>
  </div>

Answer №6

I steer clear of using flex because it is not supported in IE9 and older versions.

Instead, I rely on float:

body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:36px;
  text-align: center;
}

h1 {
  margin:0;
}

.card-container {
  perspective:700; 
  float: left; 
}

.card {
  position:relative;
  color:white;
  text-align:center;
  line-height:200px;
  margin:20px;
  width:200px;
  height:200px;
  transition:all 0.6s ease;
  transform-style:preserve-3d;
}

.front, .back {
  background-color:#5677fc;
  position:absolute;
  top:0;
  left:0;
  width:200px;
  height:600px;
  backface-visibility:hidden; 
}

.back {
  transform:rotateY(180deg);          
}

.card:hover {
   transform:rotateY(180deg);
}

.wrapper {
  display: inline-block;
}
<div class="wrapper">

  <div class="card-container" id="first">
    <div class="card">
      <div class="front"><h1>hello</h1></div>
      <div class="back"><h1>Goodbye</h1></div>
    </div>
  </div>
        
  <div class="card-container" id="second">
    <div class="card">
      <div class="front"><h1>hello</h1></div>
      <div class="back"><h1>Goodbye</h1></div>
    </div>
  </div>
        
  <div class="card-container" id="third">
    <div class="card">
      <div class="front"><h1>hello</h1></div>
      <div class="back"><h1>Goodbye</h1></div>
    </div>
  </div>
          
  <div class="card-container" id="forth">
    <div class="card">
      <div class="front"><h1>hello</h1></div>
      <div class="back"><h1>Goodbye</h1></div>
    </div>
  </div>
  
</div>

Fiddle

Answer №7

To streamline your code and avoid repetition, you can utilize a single class to style all div elements that share the same design. This way, there is no need to duplicate the CSS for each individual div.

In HTML, the div element falls under the category of block-level elements. When working with multiple divs, each subsequent one will appear on a new line by default, regardless of available space on the current line. To align them horizontally, you can use the CSS property float: left.

You can simplify your existing code with the following adjustments:

.card-container {
    float: left;
    display: flex;
    justify-content: center;
    margin-left: 10px;
    margin-top: 20px;
    perspective: 700;    
}

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

Is the indigo-pink color scheme fully implemented after installing @angular/material and scss using ng add command?

After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps? When using normal CSS (wi ...

javascriptcssangulartypescriptangular-material

Webpage not resizing when WebView orientation changes

While developing my android app, I encountered an issue with the WebView. When I am at the very top of the WebView and switch my phone to landscape mode, the webpage does not resize properly to fit the screen. It only takes up half of the screen. However, ...

androidhtmlwebviewresize

The parent div's height is not compatible with the CSS grid

I created a CSS grid layout featuring a header, side menu, and scrollable content. My goal is to test this layout in a container div where I've specified the width and height. The layout adjusts well according to the container's width, but seem ...

htmlcsslayoutcss-grid

JQuery is facing difficulty in animating a div following the completion of a "forwards" css animation

Check out this example: http://jsfiddle.net/nxsv5dgw/ A div appears on the stage and a CSS animation is applied to it. However, when attempting to use JQuery to animate the same properties that were animated by CSS, it seems to no longer work properly. ...

javascriptjqueryhtmlcssanimation

Applying a CSS class to a newly generated row with JavaScript

I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...

javascripthtmlcss

The navigation area is too small for the social media buttons to fit

Hi everyone, I'm encountering an issue with the social media buttons on my website. They're not staying in the navigation header area despite trying to use the float attribute. Here are some images illustrating the problem: https://i.stack.imgur ...

htmlcss

Placing text in a box in the corner while maintaining the ability to scroll

I'm looking for a solution to wrap text around a toolbox while keeping the total height limited and allowing the text to scroll. The challenge is to have the corner box stay fixed in the corner without scrolling along with the text. How can I achieve ...

htmlcss

step-by-step guide on transferring the text content of an HTML paragraph element to another HTML paragraph element through JavaScript in ASP.NET

I'm looking for help with passing the text value from one HTML paragraph element to another when a JavaScript function is called. The function loads a div element with an enlarged image and a paragraph content. Below is the code I am using: JavaScrip ...

javascripthtmlasp.net

Enhancing User Interfaces with React and CSS Styling

I need to incorporate two unique React components on my webpage: Component1 and Component2. Code for Page1: <Component1/> <Component2/> While the individual components will have their own CSS files for styling, I also have a page1.css file f ...

cssreactjscss-modules

I desire to place a picture atop a carousel within a bootstrap framework

I'd like half of my display picture to overlap the carousel image at the top and be centered. The carousel should serve as a cover page similar to Facebook. .dp-container{ width: 200px; height: 200px; border: 2px solid black ...

htmlcssbootstrap-4

Efficiently reducing the size of a CSS selector string with javascript

Is there a library that already performs this function? I've only been able to find online tools. The reason I am interested in accomplishing this task using JavaScript is because I need to ensure that the strings a > b, a and a> b,a are conside ...

javascriptjquerycss

The functionality of the Ajax code is taking an unusually long time

After running my Ajax code, it took a surprising 3 minutes and 15 seconds to load. What could be causing this delay? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.j ...

phpjqueryhtmlajaximagemagick

Why does the AngularJS ngRepeat filter permanently remove null values?

Check out this JSFiddle demonstration I created to illustrate the problem: http://jsfiddle.net/s6Lj2/2/ Observe that in the dataset $scope.places = [{ name: 'Chicago', status: 'Active', analyst: 'Sam', recor ...

javascriptarrayshtmlangularjs

Idea: Develop a bookmarklet that generates a header form and deletes it upon submission

After much contemplation and experimentation, I have been grappling with the idea of creating a bookmarklet that displays a header when clicked on any webpage. This header will contain a small form that submits its contents to a server before disappearing. ...

javascriptjqueryhtmliframebookmarklet

Update the Navbar links to smoothly slide along the navigation bar as the width decreases, instead of awkwardly

When in full screen, the Navbar links are displayed horizontally. https://i.stack.imgur.com/0mOLp.png However, when the width changes, they appear like this https://i.stack.imgur.com/2ylgZ.png Is there a way to ensure they shift to the left while maint ...

jqueryhtmlcss

The Unforeseen Consequences of Bootstrap Navbar CSS

I'm still learning CSS, so bear with me if I don't explain this issue correctly. Whenever I click on a navigation menu tab in Chrome or Safari, a mysterious blue rectangle appears. It doesn't show up in FireFox though. I'm not sure what ...

cssbootstrap-4

Troubleshooting Issue with Absolute Positioning and Hover Effect on Material UI Button

I have a div containing a hidden button and an inner div filled with graphs and text. Occasionally, I need to blur the inner div and make the button float on top in the center of the blurred section, similar to the layout seen on subscription prompts found ...

cssreactjsmaterial-ui

Is there a way to showcase an HTML body in the Gmail app on iOS?

I am facing a challenge while trying to incorporate HTML formatting in the body of an email shared through Gmail using UIActivityViewController on iOS. Despite my efforts, the Gmail application fails to render the HTML content properly and only displays pl ...

htmliosobjective-cgmailuiactivityviewcontroller

Persistent navigation once fullscreen banner is completed

I have a full screen header on my one-page website. Below the hero section is the navigation element, which I want to be fixed after scrolling past the height of the full screen. Here's what I currently have in terms of code. HTML: <div id="hero" ...

javascripthtmlcssfullscreen

Connect your HTML page to your CHtml page

Can anyone guide me on how to link a button in an HTML page to a chtml page within an ASP MVC project? image description here ...

htmlasp.net-mvc