Placing elements in a column underneath each other in EJS-CodePudding

I am pulling items that have been saved in our database "results.ItemPicture, results.ItemLink, etc." and using a for loop with EJS to display them on the page and would like to print them down the page in a column. As of now they just get placed on top of each other. How would I go about doing this?

    <div class =header>&nbsp;</div>
        <div >
            <main >
                <form action="/getItem" method="get" >
                    <button type="submit" ></button>
                    <input type="text"  style="color:white;" placeholder="Search" name="q">
                </form>


                    <div style = "position: absolute; top: 175px; left: 47%;">
                        <h2>
                            Add Items
                        </h2>
                    </div>
                    <div style = "position: absolute; top: 250px; left: 10%;">
                        <h1>
                            Catalog
                        </h1>
                    </div>
                <div style="width: 3000px; margin: 10px 0px;">
                    <hr size="10">
                </div>

                    <% for (var i=0; i<results.length; i  ) {%>
                        <div style = "display: block;">
                            <div style = "display: inline-block; vertical-align: top;" class = "ebayImage">
                                <a href = "#" class = "ebayImage" onclick="javascript:location.href='<%= results[i].ItemLink%>';" id="itemButton">
                                <img src= "<%=  results[i].ItemPicture %>" style="width:250px; height: auto; border: 1px solid #cacaca;" alt="redirects to original eBay listing">
                                </a>
                            </div>
    
                        <div style = "display: inline-block; vertical-align: top;" class = "ebayInfo">
                            <a href = '<%=results[i].ItemLink%>' style = 'width: auto; margin-left: 20px; color:black;'><h3><u><%= results[i].ItemName%></u></h3></a>
                            <p>&nbsp;</p>
                            <p style="justify-content: space-between; width: auto; margin-bottom: 10px; margin-left: 20px; color: #5b619b; font-weight: bold;"> Points: <%= results[i].ItemPrice%></p>  
                            <p><button type="button" style="background-color: rgb(128, 0, 0);" id="newCatItem" onclick="deleteFromCat()">Remove Item</button></p>
                        </div>
                    </div>

enter image description here

CodePudding user response：

Just remove all styles matching: position: absolute;

That property makes items overlap on each other and you probably don't need absolute positioning them on this case.

If there is a specific design you would like to follow provide a description and I can create a nice HTML example.

EDIT:

Just wrapped image and content in a div and styled with "display: block". And removed "float" property. That will set the products in different lines.

Wrap all that within the foreach.

How to use display: https://www.w3schools.com/cssref/pr_class_display.php

<div class=header>&nbsp;</div>
<div >
  <main >
    <form action="/getItem" method="get" >
      <button type="submit" ></button>
      <input type="text"  style="color:white;" placeholder="Search" name="q">
    </form>
    <div style="text-align: center;">
      <h2> Add Items </h2>
    </div>
    <div style="text-align: center;">
      <h1> Catalog </h1>
    </div>
    <div style="display: block; width: 100%; max-width: 100%; padding: 10px; box-sizing: border-box;">
      <hr size="10">
    </div>
    <% for (var i=0; i
                
                <results.length; i  ) {%>
      <div style="display: block;">
        <div style="display: inline-block; vertical-align: top;" >
          <a href="#"  onclick="javascript:location.href='<%= results[i].ItemLink%>';" id="itemButton">
            <img src="https://images.pexels.com/photos/312418/pexels-photo-312418.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:250px; height: auto; border: 1px solid #cacaca;" alt="redirects to original eBay listing">
          </a>
        </div>
        <div style="display: inline-block; vertical-align: top;" >
          <a href='<%=results[i].ItemLink%>' style='width: auto; margin-left: 20px; color:black;'>
            <h3>
              <u>Item Name</u>
            </h3>
          </a>
          <p>&nbsp;</p>
          <p style="justify-content: space-between; width: auto; margin-bottom: 10px; margin-left: 20px; color: #5b619b; font-weight: bold;"> Points: 0.00 </p>
          <p>
            <button type="button" style="background-color: rgb(128, 0, 0);" id="newCatItem" onclick="deleteFromCat()">Remove Item</button>
          </p>
        </div>
      </div>