How to make columns the same height dynamically?

How to make columns the same height dynamically?

I am having trouble making my columns the same height. I would simply like to make the columns the same height. Here is my code:

HTML:

CSS:

#left-column {    float: left;    width: 25%;    background-color: #fff;    border-right: 1px solid #cdcdcd;  }  #right-column {    width: 75%;    margin-left: 25%;  }  

The issue I'm having is that because the id's of each of the divs dynamically generate content, the heights of each columns will be based on what are inside those divs. Is there any way to set the column to the height of whatever is longer than the other column? Or is there a way to set the column height to something fixed? I have tried to add height: 1000px for each of the ids but that doesn't even seem to apply to the CSS. Any help would be appreciated.

Answer by Brijesh Vishwakarma for How to make columns the same height dynamically?

You can get help by using this code. You need to use flex css.

and css as like below.

.list  {      display: -webkit-flex;      display: -ms-flexbox;      display: flex;        -webkit-flex-wrap: wrap;      -ms-flex-wrap: wrap;      flex-wrap: wrap;  }      .list__item      {          display: -webkit-flex;          display: -ms-flexbox;          display: flex;      }  

You need some javascript code for fallback of flex css.

Answer by Dummy for How to make columns the same height dynamically?

If you want to restrict the height of each column to a limit. you can use max-height and min-height rule. But if you want to do it using Javascript. Here is the algorithm assuming that you call this function after your columns have had their content data filled in

function setHeight() {      var leftCol = document.querySelector("#left-column");      var rightCol = document.querySelector("#right-column");        var largerHeight = Math.max(leftColHeight.getBoundingClientRect().height, rightColHeight.getBoundingClientRect().height);        leftCol.style.height = largerHeight + "px";      rightCol.style.height = largerHeight + "px";  }  

Answer by Rani Moreles Rubillos for How to make columns the same height dynamically?

you may try and check my code I have use display flex to do what you want done .. check this link https://jsfiddle.net/qpfrtqh2/1/

.parent{      display: flex;  }  

Answer by Jhecht for How to make columns the same height dynamically?

There are two big options: Use Javascript, or don't use Javascript.

If you use Javascript, assuming you use a library which helps certain portions of your code become cross-browser without a lot of work on your part, then it's almost guaranteed to work on any browser that supports it.

Big Fall Back: If someone has Javascript disabled it doesn't look good.

Not Javascript

Recently CSS has gotten a new display type, flex. Now, it should be said, based on Can I Use, IE 11 has messed up support for flexbox, but a majority of browsers support it (85% support it without prefixes, and that includes most mobile browsers too!)

.flex-container {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;  }  #left-column {    -webkit-box-flex: 0;    -webkit-flex: 0 0 25%;    -ms-flex: 0 0 25%;    flex: 0 0 25%;    border-right: 1px solid #CDCDCD;  }  #right-column {    -webkit-box-flex: 1;    -webkit-flex: 1 1;    -ms-flex: 1 1;    flex: 1 1;    padding-left: 5px;  }

    
      
test
    
    
      
      
test
      
test
    
  

Answer by GCyrillus for How to make columns the same height dynamically?

Via CSS and to include older browsers like IE8 you have display:table/table-cell.

main {    display: table;    table-layout: fixed;    width: 100%;  }  #left-column {    display: table-cell;    width: 25%;    background-color: #fff;    border-right:  solid ;  }  #right-column {    display: table-cell;    width: 75%;  }

    
      
facets
    
    
      
stats
      
hits
      
pagination
    
  

To include very old browser, you may also see http://alistapart.com/article/fauxcolumns a very solid technics since you columns have fixed width

Answer by codexy for How to make columns the same height dynamically?

Try this (I added some background-colors just to see result)

main{    overflow: hidden;   }  #left-column {    float: left;    width: 25%;    background-color: red;    border-right: 1px solid #cdcdcd;     margin-bottom: -99999px;      padding-bottom: 99999px;  }  #right-column {    background-color: green;    width: 75%;    margin-left: 25%;     margin-bottom: -99999px;      padding-bottom: 99999px;  }

    
      
aa
    
    
      
bb
      
cc
      
    
  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72