Equal columns on a web page - based on shorter column

Many of the sites I’ve seen for equal columns on a web page have to do with making all the columns accommodate the longest column. How about having equal height columns based on the shorter column?

I’d like to have the left column adjust height based on the height of the right column, with the overflow set to scroll. The right column content (consisting of square image buttons) changes based on the width of the screen and how the elements resize and restack in a responsive page. You know, you narrow the screen and the column gets smaller, then suddenly snaps to a new breakpoint and gets longer, then slowly shrinks until it hits a new breakpoint and gets longer, etc.

I am using Flexbox for this page. At each breakpoint, I manually code the height of the left div column and set its overflow to scroll. (It’s just a column of news blocks - click to read the full article.) It’s clunky, but it works. But it could be more equal across more screen sizes.

TL;DR:
Is there a CSS way to equalize columns based on a shorter column?

Not sure if this is what you meant but it does what it says on the tin :smile:

 <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    .wrap {
    	max-width:980px;
    	margin:20px auto;
    	border:1px solid #000;
    	padding:10px;
    	position:relative;
    }
    .wrap:after {
    	content:"";
    	display:table;
    	clear:both;
    }
    .right-column {
    	width:45%;
    	float:right;
    	background:#f9f9f9;
    	padding:10px;
    }
    .left-column {
    	width:40%;
    	background:#666;
    	color:#fff;
    	position:absolute;
    	left:10px;
    	top:10px;
    	bottom:10px;
    	padding:10px;
    	overflow:auto;
    }
    </style>
    </head>

    <body>
    <div class="wrap">
      <div class="left-column">Bits of moving fluff not a sunrise but a galaxyrise radio telescope, inconspicuous motes of rock and gas? Another world, vanquish the impossible star stuff harvesting star light billions upon billions. Bits of moving fluff a still more glorious dawn awaits, Euclid. Cosmos, permanence of the stars vanquish the impossible. Another world! Euclid Drake Equation, Bits of moving fluff finite but unbounded take root and flourish birth network of wormholes a mote of dust suspended in a sunbeam how far away the ash of stellar alchemy as a patch of light, Rig Veda extraordinary claims require extraordinary evidence, science shores of the cosmic ocean extraordinary claims require extraordinary evidence! As a patch of light star stuff harvesting star light tendrils of gossamer clouds vanquish the impossible another world the ash of stellar alchemy consciousness made in the interiors of collapsing stars star stuff harvesting star light emerged into consciousness, inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets rogue, globular star cluster.</div>
      <div class="right-column">Hundreds of thousands Orion's sword astonishment. A very small stage in a vast cosmic arena. Birth, Rig Veda quasar Jean-François Champollion laws of physics intelligent beings courage of our questions Cambrian explosion extraplanetary not a sunrise but a galaxyrise. A very small stage in a vast cosmic arena Tunguska event from which we spring as a patch of light. Rich in mystery are creatures of the cosmos, laws of physics cosmic ocean birth rich in mystery Cambrian explosion the only home we've ever known hundreds of thousands astonishment. A still more glorious dawn awaits Euclid preserve and cherish that pale blue dot! From which we spring?</div>
    </div>
    </body>
    </html>
1 Like

Awesome! That works really well. I’ll see if I can adapt it to the Flexbox layout. Thank you!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.