lundi 7 janvier 2019

Cannot align divs horizontally alongside eachother with CSS

I am trying to display information from the database using PHP and CSS. However when I style the information it is displayed vertically, one after another. I wish to display the information in containers, side by side each other.

When i add the code <div class="w3-row-padding w3-third" to my first div, it displays the containers really small and all over my web page. I have removed the w3-third and it goes back to displaying vertically. Should i include some sort of "width=100px" for example instead?

Any help would be greatly appreciated!

          $con=new mysqli("localhost:3308","root","","fypdatabase");
        $st=$con->prepare("select * from personal_trainer where specialty=?");
        $st->bind_param("s", $cat);
        $st->execute();
        $rs=$st->get_result();
        while($row=$rs->fetch_assoc())
        {
            echo '<div class="w3-row-padding w3-third" style="margin-top:64px">
<div class="w3-col l3 m6 w3-margin-bottom">
  <div class="w3-card">
        <img src="images/'.$row["image"].'" style="width:100%"/>
        <div class="w3-container">
        <p><h3>'.$row["name"].'</h3></p>
        <p>'.$row["location"].'</p>
        <p>'.$row["fee"].' EUR</p>
        <p>'.$row["numberTWeeks"].' Weeks</p> 
        <p>'.$row["email"].'</p>
        <button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button>
    </div></div></div>
    </div>';
        }
        ?>

Aucun commentaire:

Enregistrer un commentaire