Two div elements needs to be side by side

Question

i have a single div template and i have generated multiple divs with dynamic content through PHP. now the issue is my divs are creating at irregular positions(check the image attached below) and what i want is. "I want exactly four divs of equal size in each row and each div have to be side by side and a small gap needs to be maintained between each div".

here is my div.

<div class="row" id="except">
  <div class="column">
    <div class="card">
      <h1><?php echo"$value"; ?></h1>
      <h3><?php echo"$description";?></h3>
      <h3><?php echo"$index";?></h3>
    </div>
  </div>
</div>

here is my CSS for each div.

<style>
    #except{
      width:1200px;
      height:500px;
      margin-left:160px;
    }
* {
  box-sizing: border-box;
}

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

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  transition: width 2s,height 4s;
  transition-timing-function: ease-in-out;
}
    .card:hover{
      background-color: lightgreen;
      transition-timing-function: ease-in-out;
      width: 300px;
      height: 300px;
    }
</style>

Just copy the column div and paste it 4 times within the row div, i think you are creating multiple rows in a loop. — saadat ali, Apr 28 '20 at 07:14
4 is not fixed. i want to created "N" no.of divs. "N" is a dynamic number retrieved through PHP — maneesh sandra, Apr 28 '20 at 07:22

Thomas Shields · Accepted Answer · 2020-04-28T07:43:23.260

Simple fix, Just get rid of the row div and it will work. I use this exact same code from w3 schools for my shop and all I had to do was remove the row div and it worked. :)

edit, added code below. i had to remove php part for testing purposes.
edit 2, you also need to get rid of #except other wise that will break it as well.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        * {
            box-sizing: border-box;
        }

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

        /* Float four columns side by side */
        .column {
            float: left;
            width: 25%;
            padding: 0 10px;
        }

        /* Remove extra left and right margins, due to padding */
        .row {margin: 0 -5px;}

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* Responsive columns */
        @media screen and (max-width: 600px) {
            .column {
                width: 100%;
                display: block;
                margin-bottom: 20px;
            }
        }

        /* Style the counter cards */
        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
            padding: 16px;
            text-align: center;
            background-color: #f1f1f1;
            transition: width 2s,height 4s;
            transition-timing-function: ease-in-out;
        }
        .card:hover{
            background-color: lightgreen;
            transition-timing-function: ease-in-out;
            width: 300px;
            height: 300px;
        }
    </style>

</head>
<body>

    <div class="column">
        <div class="card">
            <h1>Rev</h1>
            <h3>Df</h3>
            <h3>Rev</h3>
        </div>
    </div>
    <div class="column">
        <div class="card">
            <h1>Rev</h1>
            <h3>Df</h3>
            <h3>Rev</h3>
        </div>
    </div>


</body>
</html>

i did the same but no change. could you please share the code — maneesh sandra, Apr 28 '20 at 07:36
done, i also removed the #except, they may have been an issue as well — Thomas Shields, Apr 28 '20 at 07:38
by implementing this i have two problems could you please solve the(regarding hover effect) — maneesh sandra, Apr 28 '20 at 08:20
Sure, What is the hover effect supposed to do other then go green? — Thomas Shields, Apr 28 '20 at 08:41
https://stackoverflow.com/questions/61476510/css-cards-gets-zig-zagged-on-hover-and-also-text-is-flowing-outside-the-boxover check this link to know my problem — maneesh sandra, Apr 28 '20 at 09:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212679/discussion-between-maneesh-sandra-and-thomas-shields). — maneesh sandra, Apr 28 '20 at 09:18

score 1 · Answer 2 · answered Apr 28 '20 at 07:53

1

You need to change your css code as shown below:

#except {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.column {
    float: left;
    width: 25%;
    padding: 0 10px;
    margin-bottom: 20px;
    flex-basis: 25%;
}

answered Apr 28 '20 at 07:53

Mohsen007

285
3
13

Two div elements needs to be side by side

2 Answers2