CSS columns separating divs

Question

I am building platform with template like a https://pinterest.com and
I have html structure like this:

<div class="main">
    <div class="content">
         <div class="content_publisher">
         </div>
         <div class="content-text">
         </div>
    </div>
</div>

And i have style.css like this:

body {
    width:1358px;
}

.main {
    column-width:339.33px;
    column-gap: 0;
    column-count:4;
    position:relative;
    top:50px;
    width:100%;
}

.content {
    display:block;
    margin-bottom:10px;
    width:337px;
    -webkit-box-shadow:inset 0px 0px 10px;
}

My page is devided to 4 columns... Look at the image you will understand what i want exaclty.. https://i.stack.imgur.com/fPfDp.png As you can see at the end of the column, The column is separating divs inside in content div..

I know masonry but there are couple amount of JS and CSS codes, should have a simple way to solve this problem using JS, or and CSS trick; I dont want to use all of the masonry API for one small problem. TY for reply — Jessica Habze, May 14 '17 at 00:20

score 2 · Answer 1 · answered May 14 '17 at 00:14

2

Use display: inline-block on .content.

body {
  width: 1358px;
}

.main {
  column-width: 339.33px;
  column-gap: 0;
  column-count: 4;
  position: relative;
  top: 50px;
  width: 100%;
}

.content {
  display: inline-block;
  margin-bottom: 10px;
  width: 337px;
  -webkit-box-shadow: inset 0px 0px 10px;
  height: 200px;
  background: #eee;
}
.content:nth-child(odd) {
  height: 150px;
}

<div class="main">
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

answered May 14 '17 at 00:14

Michael Coker

52,626
5
64
64

@JessicaHabze you're welcome. fyi I use this site for reference on techniques, they always use `inline-block`. http://w3bits.com/css-masonry/ (be sure to mark the answer as solved if this fixed it) – Michael Coker May 14 '17 at 00:57
@JessicaHabze this answer have ordering problem. if you want to create your own you need to create columns as div and fill the content. on resize and page load you need javascript to change columns div count and fill columns div in. proper way. This is how Google plus and masonry managing it. – ICE May 14 '17 at 01:52
1

@ICE what do you mean "ordering problem". You mean because it goes from top to bottom instead of left to right? I'm assuming OP knows that. And it's not my answer that has an "ordering problem," it's the approach to CSS masonry that's *ordered differently* than traditional "masonry." OP also is fine with this technique and the ordering - they were using this technique to begin with. Their problem is the "bricks" were splitting in the middle of the content. `inline-block` fixes that. – Michael Coker May 14 '17 at 01:56
Yes. I was mentioning that because column- ordering is top to to bottom. I had about the same question here http://stackoverflow.com/questions/42648716/arrange-elements-vertically-without-spacing but I didn't find css solution for that :( – ICE May 14 '17 at 02:09
1

and sorry about what I said about your answer. I was mentioning it because of column- behaviour. My bad. – ICE May 14 '17 at 02:20
1

@ICE no worries, I just wanted to clarify that though. I'm assuming OP knows it orders differently - they were already using the technique and didn't ask about that so I wanted to point out it's not my answer that has a problem, it's the approach in the first place - if you even want to say it's a problem. I wouldn't say it's a problem if you're aware how it works and order your content accordingly. – Michael Coker May 14 '17 at 02:23

CSS columns separating divs

1 Answers1