mardi 21 avril 2015

html-css floating divs fit container height

After a couple of hours searching solutions I'm still stucked. I have a window and a content div and a buttons div inside this window. The content div can have various fixed width groups inside , which are generated by php code. These groups have various number of lines of content, which means that each group have different height according to the content generated.

How can I make all the groups' height adjust to the largest group's height with css?

In the examle here Fiddle there is 3 groups and 3 heights, the goal would be to have all the groups heights adjusted to the height of the largest group. The example code so far is:

<div id="window">
    <div id="winContent" style="display:table;background-color: lightyellow">
            <div id="dataContent" style="display:table-row;background-color: lightblue">
                    <div id="group1" class="grpClass" style="background-color: lightcyan;">
                        GROUP1<br />
                        A few lines of text <br />
                        A few lines of text <br />
                        A few lines of text <br />
                        A few lines of text <br />
                    </div>
                     <div id="group2" class="grpClass" style="background-color: lightcyan;">
                         GROUP2<br />
                        A few lines of text <br />
                        A few lines of text <br />
                        A few lines of text <br />
                    </div>
                    <div id="group3" class="grpClass" style="background-color: lightcyan;">
                        GROUP3<br />
                        A few lines of text <br />
                        A few lines of text <br />
                    </div>
            </div>
            <div id="winButtons" class="btnClass" style="background-color: lightcoral;">
                BTN1 BTN2 
            </div>
    </div>

<style>
.grpClass{width:200px;float:left;  
border-radius: 10px;border: 1px solid #8AC007;padding: 5px;

}
.btnClass{display:table-row;float:right;
border-radius: 10px;border: 1px solid #8AC007;padding: 5px; margin-top:5px;}
</style>

Aucun commentaire:

Enregistrer un commentaire