1

I had no better idea how to say it in title, i want to fill this remain height in middle column.

This is now:

This is now

This is what i want:

This is what i want

Im using container for all with 1000px, and inside of it i have panels

.contentPanel{
    float: left;
    width: 31%;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}

But i have no idea what to change to have it as i have on the second screenshot.

Mohammad Sadiqur Rahman
  • 5,379
  • 7
  • 31
  • 45
Rafał Michałuszek
  • 84
  • 6
  • 1
    If you want any help from our side. You need to post more code. – Rehan Apr 09 '17 at 11:50
  • 1
    We need the html markup and the rest of the CSS. It looks like you have a float clearing, but no idea what to suggest without more code. – mayersdesign Apr 09 '17 at 11:50
  • Possible duplicate of [CSS: Floating multiple elements with different heights on multiple rows?](http://stackoverflow.com/questions/14280539/css-floating-multiple-elements-with-different-heights-on-multiple-rows) – Roope Apr 09 '17 at 11:52
  • I think you need to remove clear-fix CSS. – Ashwin Mothilal Apr 09 '17 at 12:03

1 Answers1

1

jsfiddle

This uses only raw css3 columns (not even flex).

basic idea:

.card {
  background-color: white;
  break-inside: avoid;
  padding: 1rem;
  margin-bottom: 1rem;
}

.card:nth-child(2n) {
  break-after: column;
}

main {
  background-color: whitesmoke;
  column-count: 3;
  column-gap: 1rem;
}
<main>
  <div class="card">
    1
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
    </p>
  </div>
  <div class="card">
    2
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
    </p>
  </div>
  <div class="card">
    3
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </p>
  </div>
  <div class="card">
    4
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
  </div>
  <div class="card">
    5
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </p>
  </div>
  <div class="card">
    6
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
    </p>
  </div>
</main>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
roberto tomás
  • 4,435
  • 5
  • 42
  • 71
  • Is it possible to keep horizontal order? I mean 1 2 3 4 5 6, not 1 3 5 2 4 6 – Rafał Michałuszek Apr 09 '17 at 13:11
  • it is not possible with css columns using only css. css columns create virtual pages and use page-break to columnarize the content. You can use flex for that instead: https://codepen.io/kattixie/pen/bEYyZb - however, this creates a dependency on the height of the container. A better option would be to use copy and paste to rearrange the divs – roberto tomás Apr 09 '17 at 13:55