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; }

<main class="flex-container"> <div id="left-column"> <div id="facets">test</div> </div> <div id="right-column"> <div id="stats" test></div> <div id="hits">test</div> <div id="pagination">test</div> </div> </main>

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%; }

<main> <div id="left-column"> <div id="facets">facets</div> </div> <div id="right-column"> <div id="stats">stats</div> <div id="hits">hits</div> <div id="pagination">pagination</div> </div> </main>

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

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"; } 

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; } 

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

<ul class="list"> <li class="list__item"><!-- content --></li> <li class="list__item"><!-- content --></li> <!-- other items --> </ul> 

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.

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; }

<main> <div id="left-column"> <div id="facets">aa</div> </div> <div id="right-column"> <div id="stats">bb</div> <div id="hits">cc</div> <div id="pagination"></div> </div> </main>

There is no need to use javascript for that. Just leverage standard table display in CSS.

FIDDLE