-1

I want to have pinterest.com kind of css template. I got that.

But, some of my widgets got cut and coming in next line. I mean, half of the widget is coming in one row and another half is coming in next row.

And i want to place my widgets horizontally. not vertically.

Advanced thanks for response.

See my css and html code.

#wrapper-main{
     column-count: 4;
     column-gap: 30px;
     column-fill: auto;
     overflow: hidden;
     width: 1200px;
     margin: 0 auto;
     padding-bottom: 250px;
    }

    .widget-main{
     background-color: #6d6d6d;
     box-shadow: 1px 1px 8px #cfcfcf;
     margin-bottom: 20px;
     display: block;
     min-height: 250px;
    }

    .widget-blue{
     background-color: #3ec6e0;
    }

    .widget-seagreen{
     background-color: #56d6be;
    }

    .widget-red{
     background-color: #e2546c;
    }

    .widget-yellow{
     background-color: #fc8b01;
    }

    .widget-green{
     background-color: #81b847;
    }

    .widget-blue2{
     background-color: #2f99b3;
    }

    .widget-mud{
     background-color: #dbae53;
    } 
    <body>
    <div id="wrapper-main">
   
     <div class="widget-main">Widget 01</div>
     <div class="widget-main widget-blue">Widget 02</div>
     <div class="widget-main  widget-seagreen">Widget 03</div>
     <div class="widget-main  widget-mud">Widget 04</div>
     <div class="widget-main  widget-red">Widget 05</div>
     <div class="widget-main  widget-yellow">Widget 06</div>
     <div class="widget-main  widget-green">Widget 07</div>
     <div class="widget-main  widget-blue2">Widget 08</div>
     <div class="widget-main widget-blue">Widget 09</div>
     <div class="widget-main  widget-seagreen">Widget 10</div>
     <div class="widget-main  widget-mud">Widget 11</div>
     <div class="widget-main  widget-red">Widget 12</div>
     <div class="widget-main  widget-yellow">Widget 13</div>
     <div class="widget-main  widget-green">Widget 14</div>

    </div>
</body>
Shogunivar
  • 1,237
  • 11
  • 18
Manoj
  • 97
  • 1
  • 4
  • 11
  • Hi Kikonyogo and Serge, it was not working. Thanks for you try. – Manoj Mar 09 '17 at 10:26
  • I found the below link from other question in this site. https://jsfiddle.net/2otpzbgt/1/ https://jsfiddle.net/costumingdiary/p0czqdz0/ – Manoj Mar 09 '17 at 10:27

2 Answers2

0

I think the easiest way to do that is to use Masonry.. I tried to do what you did once, and was not able to make it horizontally.

Source: http://masonry.desandro.com/

Serge Inácio
  • 1,366
  • 9
  • 22
0

check if there is any javascript files linked. Sometimes javascript is used to dynamically edit css properties basing on a given condition for example adjusting colors sizes based on screen size

kikonyogo faustine
  • 1
  • 1