HTML changeable div height with static width lots of divs

Question

I think everyone knows this site http://pinterest.com/ and I don't want to create site like this but I have another purpose I want to create divs under divs with static width and the height always changeable value.

I made HTML code here it is: http://jsbin.com/ihekiv

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    div{
        margin: 5px;
    }
    .width-200{
        width: 200px;
    background-color: #FCF;
    }
    .float-left{
        float: left;
    }
</style>


</head>

<body>

    <div class="width-200 float-left color-01" style="height: 300px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

</body>
</html>

In my HTML code you can clearly see div five not going under div one how can I take this div five under div one. may be this div one will change its height may be some divs will change its height now I want to know how can I do this when the divs height getting changeable. Could you anyone please tell me how to do this.

Its not possible with CSS. Jquery plugin: http://www.wookmark.com/jquery-plugin — SVS, Jun 12 '12 at 15:47

score 3 · Accepted Answer · edited May 23 '17 at 10:34

3

CSS can't do this, because you have a variable number of columns.

Instead, use jQuery Masonry: http://masonry.desandro.com/

There's also a no-framework version, Vanilla Masonry: http://vanilla-masonry.desandro.com/

edited May 23 '17 at 10:34

Community

1
1

answered Jun 12 '12 at 15:10

thirtydot

224,678
48
389
349

score 1 · Answer 2 · answered Jun 12 '12 at 17:59

1

The only thing I can thing of is

body {
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-webkit-column-width: 200px;
}

It's not a good solution and is only support on webtkit.

answered Jun 12 '12 at 17:59

David Allen

1,123
2
10
24

HTML changeable div height with static width lots of divs

2 Answers2