Making 2 adjacent columns the same height

maybe using display: grid, but trying to be IE compliant

[csdude55]

I have two columns; one with a fixed width, the other will take up the remaining space within the container. The columns are different colors, so I want them to be the same height to make it look right.

I also need to be able to make the first column disappear on mobile.

The best I came up with was:

// CSS
#mainCont {
 display: grid;
 grid-template-columns: 250px auto
}

@media only screen and (max-width: 660px) {
 #mainCont {
  grid-template-columns: none auto !important
 }

 #first { display: none }
}

// HTML
<div id="mainCont">
 <div id="first">First Column</div>
 </div id="second">Second Column</div>
</div>

This works, but I see that IE can choke on it:

[caniuse.com...]
[caniuse.com...]

The solution for grid-template-columns is easy enough, just add -ms-grid-columns. But what about the container's display:grid?

Since this is just cosmetic then I can live with IE users not having the matching height, but I need to make sure that it's at least legible. I don't even have IE anymore to test with :-/

[not2easy]

Try replacing display: grid; with display: block; See if that works for your needs. What happens when mobile users view landscape mode?

[lucy24]

And then there's display:table and display:table-cell. In effect, the opposite of using tables for format: it looks like a table, but isn't one.

[csdude55]

What happens when mobile users view landscape mode?

@not2easy, on my Android everything works as expected. When I load it in Portrait mode the left column is gone and the right column fills the page, then in Landscape the left column comes back and the right column adjusts properly.

It turned out that using "none auto" left a gap on the right, though, so this worked better:

@media only screen and (max-width: 660px) {
 #mainCont {
 grid-template-columns: none auto !important
 }

I tried changing to display: block but that just gave me rows instead of columns.

Then I tried using display: table like so:

// CSS
#mainCont {
 display: table;
}

#first, #second { display: table-cell }

#first { width: 250px }

// HTML
<div id="mainCont">
 <div id="first">First Column</div>
 </div id="second">Second Column</div>
</div>

This seems to work, although table doesn't make all of my widths and heights match up like grid does. But since I'm just trying to accommodate a few users with older browsers, that's not a tragedy.

So that makes my final:

// CSS
#mainCont {
 display: table;
 display: grid;
 grid-template-columns: 250px auto
}

#first, #second { display: table-cell }

#first { width: 250px }

// HTML
<div id="mainCont">
 <div id="first">First Column</div>
 </div id="second">Second Column</div>
</div>

I don't love that #first and #second are now set to table-cell when grid exists, though, or that I had to explicitly set the width of #first after grid-template-columns already set it. I don't see an immediate problem with it, but overlapping like that doesn't make me feel super confident that it won't become an issue in the future.