CSS blocks side by side

Question

Is that possible to do with CSS.

enter image description here

I tried this:

    #gallery_ul  {
        display: inline-block;
        list-style: none outside none;
        margin: auto auto auto auto;
        width: 986px;
    }

    #gallery_ul li {
        float:left;
        margin:10px;
        padding:10px;
        text-align:center;
        border:1px solid grey;
        width:274px;
    }

    #gallery_ul img {
        padding-bottom:5px;
    }

If yes then how? Thank you.

pure css solution: create different classes for each element. and set those classes until you get the desired result. — Mr_Green, Aug 26 '13 at 12:58

score 0 · Accepted Answer · answered Aug 26 '13 at 12:51

0

You can either do it with CSS-columns or with javascript. I would suggest javascript, unless you don't need to worry too much about browser support/quirks.

See the masonry plugin for the most popular way to do so: http://masonry.desandro.com/

answered Aug 26 '13 at 12:51

robooneus

1,344
8
10

score 0 · Answer 2 · answered Aug 26 '13 at 12:56

0

You can. But i think you have to be more specific.

One approximation is to create each block and set "float: left" property, then the squares will organize automatically or you can create three vertical columns and then put the squares inside.

answered Aug 26 '13 at 12:56

Juan Rivillas

897
2
9
23

CSS blocks side by side

2 Answers2