Stacking Divs with Variable Height in 2 Columns Like Facebook Timeline

Stacking divs with variable height in 2 columns like Facebook Timeline

I worked on this last night and found a rather simple way to do.

Compare the bottom position of the left column and the right column, append the new li element to the side with smaller value, which can be done by th e following way:

var last_left_post = $('.left:last');
var last_right_post = $('.right:last');
var left_position = 0;
var right_position = 0;

left_position = last_left_post.height() + last_left_post.offset().top;
right_position = last_right_post.height() + last_right_post.offset().top;

if(left_position<=right_position){
    $('#timeline').append('<li class="left"></li>');
}else{
    $('#timeline').append('<li class="right"></li>');
}

.left and .right using the same css as you do.

Using CSS to create two equal height layout columns, and inserting three equal height stacked columns inside the right column

Richard Sussans answer is right, but you need to float the columns (both left) in order to make them appear next to eachother. You also need to specify a height for the columns (as well as their parent elements, assuming the height is set in %) for their children to expand vertically. With your markup, the following css should do the trick:

html, body, .container {
    height: 100%;
}
.left {
    float: left;
    height: 100%;
    width: 35%;
}

.right {
    float: left;
    height: 100%;
    width: 65%;
}

.col-1-1 {
    height: 25%;
}

.col-1-2 {
    height: 75%;
}

.col-2-1 {
    height: 33%;
}

.col-2-2 {
    height: 33%;
}

.col-2-3 {
    height: 34%;
}

How to create variable columns and fill them up?

columns can do this:

#parent {
  background-color: firebrick;
  column-width:120px; /* set the width of columns and the number will be automatic */
  column-gap: 20px; /* to replace margin between element */
  padding:0 10px;
}

.child {
  background-color: #fff;
  height: 30px;
  display:inline-block; /* use inline-block because block element are buggy */
  width:100%; /* make them full width so they behave like block */
  margin:10px 0; /* keep only top and bottom margin */
  padding: 3px;
  box-sizing:border-box;
}

<div id="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>

CSS Floating Divs At Variable Heights

To my knowledge, there's no way to fix this problem with pure CSS (that works in all common browsers):

Floats don't work.
display: inline-block doesn't work.
position: relative with position: absolute requires manual pixel tuning. If you're using a server-side language, and you're working with images (or something with predictable height), you can handle the pixel tuning "automatically" with server-side code.

Instead, use jQuery Masonry.

How can I distribute the same height between my elements according to the available space inside their parent container? (I need dynamic solution)

I think this is what you are going for. Here are 2 approaches: 1 using display: flex and the other using display: grid. Also, as a word of advice, I wouldn't suggest using bootstrap...it's better to just code your own layouts from scratch. Otherwise you get locked into their existing classes and end up just overwriting a load of their code.

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,body{
  height: 100%;
}

.row {
  background: #f8f9fa;
  height: 100%;
  width: 100%;
  padding: 5px;
}

.col-12 {
  border: solid 1px red;
  width: 100%;
}

/*Approach 1*/

.row{
  display:flex;
  flex-direction: column;
}

.col-12{
  flex-grow: 1;
}

/*Approach 2*/

.row{
  display: grid;
  grid-auto-rows: 1fr;
}

<div class="row no-gutters">
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
  </div>

CSS 3 Column Liquid Layout Dynamic Same Height Column

You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.

Check out this fiddle for an example:

http://jsfiddle.net/kLMtb/

Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.

And take a look at this for an explanation of css table display properties:

http://ajaxian.com/archives/display-table

Stacking Divs with Variable Height in 2 Columns Like Facebook Timeline