Making divs for a hotel booking page. but i want them to be the same size

Question

i am making a hotel booking page. this is the overview where customers can see al rooms, and check some info before getting sent to a details page of a certain room. where they can make a reservation. the problem is. some room descriptions are bigger than others. But i want every room div to have a static size. as you can see in the screenshot i got that figured out but there is this white gap at the bottom of each div. How can i make it so the white gap is inbetween the room description and the other details in the table instead of at the bottom?

Code:

<?php

    include_once "db.php";
    include "preset.php";

    $db = new Database();
    $room = $db->select("SELECT * FROM room");
?>

<body>
    <div class="container">
        <div class="room_container">
            <?php foreach ($room as $rows){ ?>
                <div class="col-4">
                    <div class="top">
                        <h3><?php echo $rows["roomName"]; ?></h3>
                        <p><?php echo $rows["roomDescription"]; ?></p>
                    </div>

                    <table class="table table-striped">
                        <tbody><tr>
                            <td>Soort Kamer:</td>
                            <td><?php echo $rows["typeOfRoom"] ?></td>
                        </tr>
                        <tr>
                            <td>WC:</td>
                            <td><?php echo $rows["toilet"] ?></td>
                        </tr>
                        <tr>
                            <td>Douche:</td>
                            <td><?php echo $rows["shower"] ?></td>
                        </tr>
                        <tr>
                            <td>Wastafel:</td>
                            <td><?php echo $rows["sink"] ?></td>
                        </tr>
                        <tr>
                            <td>Prijs:</td>
                            <td><?php echo "€ ".$rows["ppn"]." ,-" ?></td>
                        </tr>
                    </tbody></table>

                </div>
            <?php } ?>
        </div>
    </div>
                
</body>


Css: div.col-4 {
    width: 230px;
    float: left;
    margin-right: 25px;
    height: 500px;
    margin-bottom: 25px;
    border: 1px solid #654b24;
    border-radius: 5px;
    padding: 0.5em;
}

Screenshot: prnt.sc/PcmTH6qiOtAd

Sorry for not including screenshot of what im talking about. here it is: https://prnt.sc/PcmTH6qiOtAd — Arjen Bos, Mar 30 '22 at 14:33
You should [edit] your question if you have more info, not hide it in the comments :-) — ADyson, Mar 30 '22 at 14:34
If it's a HTML/CSS display question show some generated HTML, not the PHP version because the CSS works on the finished HTML — ADyson, Mar 30 '22 at 14:36
One option: Use a fixed height for each section: title/desc/details. You can add `overflow:auto` in the case where the desc/title is too long, rather than lose details off the bottom. You can style scrollbars to match your site. — freedomn-m, Mar 30 '22 at 14:44
Alternatively, use `display:flex` with `flex-grow`. Here's an existing question that seems to be asking exactly the same thing: https://stackoverflow.com/q/31000885/2181514 — freedomn-m, Mar 30 '22 at 14:45

score 1 · Answer 1 · answered Mar 30 '22 at 14:39

1

you need to add a margin-bottom to this div

<div class="top mb-5">
  <h3><?php echo $rows["roomName"]; ?></h3>
  <p><?php echo $rows["roomDescription"]; ?></p>
</div>

answered Mar 30 '22 at 14:39

giosan

291
1
4
15

Making divs for a hotel booking page. but i want them to be the same size

1 Answers1