Style my divs next to each other

Question

0.00/5 (No votes)

See more:

I have been tryign this for a while now and i just don't understand why I can't put my divs next to each other like this
[div][div][div]

I honestly have been asking everywhere and I continue to egt this result

<style>
      header{
          background-image: url("brood.jpg");
      }
      body {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 20px;
      }
      .grid {

          /* display: grid;
          grid-template-columns: repeat(2, 50%); you can change 1fr to whatever you want, 200px for example */
          /* grid-column: 1 / 3; */
          /* flex-flow: row wrap; */
          /* flex-direction: row;
          flex-wrap: wrap;
          background-color: orange; */
      }
       section{
          display: grid;
          grid-template-columns: repeat(3, 1fr); /* you can change 1fr to whatever you want, 200px for example*/
          gap: 2rem;
           /* width: 50%; */
          /* display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-column-gap: 10px;
          grid-row-gap: 10px; */
           /* display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
          grid-auto-rows: minmax(100px, auto); */
          background-color: orange;

          /* grid-column: 1;
          grid-row: 2 / 5; */
      }

      .card{
          height: 20%;
      }

      #myBtn {
          display: none;
          position: fixed;
          bottom: 20px;
          right: 30px;
          z-index: 99;
          font-size: 18px;
          border: none;
          outline: none;
          background-color: black;
          color: white;
          cursor: pointer;
          padding: 25px;
          border-radius: 50px;
      }

      #myBtn:hover {
          background-color: #555;
      }

  </style>
  <body>

      <!-- Navigation-->
      <?php include "navbar.php"; ?>
      <?php if(isset($_SESSION['USER_ID'])){ ?>
      <!-- Header-->
      <header class="bg-dark py-5">
          <div class="container px-4 px-lg-5 my-5">
              <div class="text-center text-white"> <!--Het werkt -->
                  <h1 class="display-4 fw-bolder">Goedemorgen, <?php echo $_SESSION['USERNAME'];?></h1>
                  <p class="lead fw-normal text-white mb-0">Quantity kan nog niet veranderd worden.</p>
              </div>
          </div>
      </header>
      <?php
      } else {
      ?>
              <!-- Header-->
              <header class="bg-dark py-5">
          <div class="container px-4 px-lg-5 my-5">
              <div class="text-center text-white"> <!--het werkt-->
                  <h1 class="display-4 fw-bolder">Goedemorgen, Gast</h1>
                  <p class="lead fw-normal text-white mb-0">Quantity kan nog niet veranderd worden.</p>
              </div>
          </div>
      </header>
      <?php
      }
      ?>

      <!-- Section-->
      <button onclick="topFunction()" id="myBtn" title="Go to top">↑</button>


      <?php

      include "config.php";

      $sql  = 'SELECT * FROM broodjes';
      $stmt = $conn->prepare($sql);
      $stmt->execute();
      $result = $stmt->get_result(); // get the mysqli result

      // maar als je test hier gooit  dan pakt hij alleen de eerste

      // dit miscchien? https://stackoverflow.com/questions/13047909/styling-multiple-while-loop-results-getting-them-next-to-each-other

      echo '<section class="py-5">';
      while($row = mysqli_fetch_assoc($result)){
          //echo '<div class="grid">';
              echo '

              <div class="container1 px-4 px-lg-5 mt-5">
                  <div class="row gx-4 gx-lg-1 row-cols-2 row-cols-md-2 row-cols-xl-1 ">
                      <div class="col mb-5">
                          <div class="card h-100">
                              <!-- Product image dit kan later nog wel-->
                              <div class="fw-image">
                                  <img class="card-img-top" src="brood.webp" alt="brood foto" />
                              </div>
                              <!-- Product details-->
                              <div class="card-body p-4">
                                  <div class="text-center">
                                      <div class="broodjes_ID">
                                      <input type="hidden" name="broodjes_ID" value='. $row['broodjes_ID'] . '/>
                                      </div>
                                      <!-- Product name-->
                                      <div class="broodnaam">
                                          <input type="hidden" name="broodnaam" value='. $row['broodnaam'] . '/>
                                          <h5 class="fw-bolder">'.$row['broodnaam']. '</h5>
                                      </div>
                                      <!-- Product price-->
                                      <div class="prijs">
                                          <input type="hidden" name="broodnaam" value='. $row['prijs'] . '/>
                                          <h3> Prijs:  </h3>   <h3 class="fw-price"> €'.$row['prijs']. '</h3><br>
                                      </div>
                                      <!--voorraad-->
                                      ';
                                      if($row['voorraad'] == 0){
                                          echo '<h3 class="fw-voorraad" style="color: red;"> uitverkocht</h3><br>';
                                          echo '<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                              </div>';
                                      }else{
                                          //link die misschien kan helpen https://www.withinweb.com/info/a-shopping-cart-using-php-sessions-code/
                                          $broodjes = $row['broodjes_ID'];
                                          echo ' Voorraad: '.$row['voorraad'].'<br>
                                          </div>
                                          </div>
                                          <!-- Product actions-->

                                          <form action="cart.php?broodjes_ID='. $broodjes.'" method="POST" name="broodjes"  value=""
                                              <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                                  <div class="text-center"><button class="btn btn-outline-dark mt-auto shop-item-button" type="submit" name="add_to_cart">Bestellen</button></div>
                                              </div>
                                          </form>';
                                  }

                          echo '</div>
                      </div>
                  </div>';
      echo '</div>';
      }
      echo  '</section>';

What I have tried:

I have tried putting more divs in my while loop but that also just shows the same result. tried changing the styling on the while loop but it still doesn't show the divs like [div][div][div]. I'm really out of options right now. can someone please help me?

Posted 5-Apr-22 21:12pm

minoesje minoes

Updated 5-Apr-22 23:31pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2022-04-05T21:59:00

Solution 1

You've applied display:grid to the section element. But that element only contains a single div element.

Move the section opening and closing tags outside of your while loop.

PHP

echo '<section class="py-5">';
while($row = mysqli_fetch_assoc($result)){
    echo '<div class="container1 px-4 px-lg-5 mt-5">...';
    ...
}
echo '</section>';

CSS Grid Layout - CSS: Cascading Style Sheets | MDN[^]
A Complete Guide to Grid | CSS-Tricks - CSS-Tricks[^]
Grid by Example[^]

Posted 5-Apr-22 21:59pm

Richard Deeming

Updated 5-Apr-22 22:00pm

v2

Comments

minoesje minoes 6-Apr-22 5:25am

this is indeed kinda what I want. only problem is if I have (for example) 11 items. then the styling will look something like
[div][div][div]
[div][div][div]
[div][div][div]
[div]
[div]

and that's not what I want
I want it to go
[div][div][div]
[div][div][div]
[div][div][div]
[div][div]

Richard Deeming 6-Apr-22 5:27am

Are you sure? If your grid has three columns, and you have 11 items, then the last two items will be in the same row, which matches your expected output.

minoesje minoes 6-Apr-22 5:30am

yes sadly I can't show the picture of how it looks I will update the code to show what I have now.

Richard Deeming 6-Apr-22 6:07am

The grid layout works as expected for me: Demo[^]

You'll need to use your browser's developer tools to inspect the elements to see if you can work out what's going wrong.