Search code examples
phpcssheightautomatic-properties

Automatic box heights

I have a php site with a while loop, that reads out a database. For example it reads out: name,category etc..After it has read out all parameters it puts the values in a box (like in windows or such things). This box is a Div. Now my porblem is,that some boxes are bigger than the others. I want that every box is as big as the biggest box in the same row.

This code is within a while loop

Here is our PHP code:

    $out .= "<feld class='$categoryTextwithoutempty'><searchTitel class=\"$str1\"><div id ='divs' class=\"divs\" ></searchTitel></feld>";

        $out .= "<div id ='formValue' class='$categoryTextwithoutempty'  onclick=BoxClick('$MASPID'); >";

    $out .= "<div id ='type$MASPID' class=\"$form_name\" >";


    $out .= "<h4><ul> $form_name </ul></h4><hr>";


    $out .= "<div id ='Inhalt' class=\"descriptionDiv\" >";
    $out .= "<ul> <b>Beschreibung: </b>$form_description</ul>";
    $out .= "<ul> <b>ID: </b>$MASPID</ul>";
    $out .= "<ul> <b>Kategorie: </b>$categoryTextwithoutempty</ul>";
    $out.= "<ul> <b>Link: </b>$link</ul>";

    $out .= "</br>";

    $out .= "</div>";
    $out .= "</div>";
    $out .= "</div>";
    $out .= "</div>";
    $out .= "</div>";

And Here the CSS file:

.divs {
background-color: #E6E5D8;
border-style:groove;
border-radius:15px;
width:250px;
float:left;
margin-left:13px;
margin-top: 13px;
height: 600px;
overflow: hidden;
text-align: left;

Thanks for your help

Solution

  • You have 2 options to do that:

    1. Use javascript to define the biggest box.
    2. Or a pure css solution with flex-box:
    .list {
   display: flex;
   flex-wrap: wrap;
}
.list .child {
   display: flex;
}

    See this article as reference: