CODEWITHSUNDEEP
htmlcss
Askaga
Askaga

Reputation: 6331

Html layout: How to get arbitrary amounts of floating divs to have the same height?

I want to create a web design using a variable amount of 'boxes' containing any amount of text, and have the design look somewhat like a table. However, in case the screen size is smaller (i.e. mobile phones) i want the cells to 'continue' in the next row.

My idea was to create the cells by using divs with float:left, but the height of the various divs differs, thus making the whole thing look ugly.

There seem to be a lot of hacks around from people which use this div-based concept to create a fixed amount of columns, but how do I make it work for this particular problem?

Upvotes: 1

Views: 88

Answers (1)

enhzflep
enhzflep

Reputation: 13089

I'd just use javascript to iterate through the list of pertinent divs, getting the height of the tallest one. I'd then go through and se the height of all of them explicitly.

Consider the following:

CSS:

#container
{
    display: inline-block;
    width: 25%;   /* for the sake of the example only. serves no purpose other than forcing two rows of 3 items, when viewed on a 1366px wide monitor */
}
.floatLeft
{
    float: left;
    border: solid 2px red;  /* also only for the sake of the example */
}

HTML:

<body>
    <div id='container'>
        <div class='floatLeft'>
            This has 1 line
        </div>
        <div class='floatLeft'>
            This has 1 line<br>
            This has 1 line
        </div>
        <div class='floatLeft'>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line
        </div>
        <div class='floatLeft'>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line
        </div>
        <div class='floatLeft'>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line
        </div>
        <div class='floatLeft'>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line<br>
            This has 1 line
        </div>
    </div>
</body>

and finally, where the 'magic' happens: JAVASCRIPT:

function setHeights()
{
    var divList = document.getElementsByClassName('floatLeft');
    var i, n = divList.length;
    var maxHeight = 0;
    for (i=0; i<n; i++)
    {
        if (divList[i].clientHeight > maxHeight)
            maxHeight = divList[i].clientHeight;
    }
    for (i=0; i<n; i++)
        divList[i].style.height = maxHeight + "px";
}

Upvotes: 1

Related Questions