Automatic box heights

Question

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

But how can we use these tables to all divs in one row as big as the biggest in the same row ? — Phigy, Jul 16 '14 at 12:22
html table row cells `
...` automatically do this. Use tables instead of divs here — Steve, Jul 16 '14 at 12:28

score 0 · Answer 1 · answered Jul 16 '14 at 12:21

Take a look at http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

It's an old article, but works for me.

EDIT:

<style>
li {
    width: 200px;
    min-height: 250px;
    border: 1px solid #000;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    zoom: 1;
    *display: inline;
    _height: 250px;
}
</style>

<ul>
<li>
    <div>
        <h4>This is awesome</h4>
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
        alt="lobster" width="75" height="75"/>
    </div>
</li>
</ul>

Romain · Accepted Answer · 2014-07-17T07:20:53.700

0

You have 2 options to do that:

Use javascript to define the biggest box.
Or a pure css solution with flex-box:

.list {
   display: flex;
   flex-wrap: wrap;
}
.list .child {
   display: flex;
}

See this article as reference:

edited Jul 17 '14 at 07:20

answered Jul 16 '14 at 12:29

Romain

103
7

Automatic box heights

2 Answers2