Making 2 columns equal in height

[csdude55]

I have the following layout:

<main>
 <section style="float: left"></section>
 <aside style="float: right"></aside>
</main>

Now I'm trying to use position:sticky inside of <aside>, but it doesn't work because <aside> isn't the same height as <section>.

I'm 90% sure that I could use flexbox or grid instead of floating the elements left and right, but neither work well with IE and that's a concern since this would affect the entire layout of the site on every page.

Any other suggestions on getting the min-height of <aside> to match <section>? The only thing I can think of is to do it in JavaScript and then set position:sticky via the same JavaScript, but I'm hoping there's a better way.

[edited by: not2easy at 8:17 pm (utc) on Dec 31, 2023]
[edit reason] typo [/edit]

[csdude55]

I think that I found A solution, but I don't have a way to test it so I'm not positive.

IE10+ recognizes -ms-flex, so I can abandon using floats in favor of flexbox. Then the columns have the same height.

This is what I wrote; it works on modern browsers, but I don't have a way of testing on older IE so I'm just guessing:

main {
 display: -ms-flexbox;
 display: flex;
}

section {
 -ms-flex-basis: 100%;
 flex-basis: 100%;
}

aside {
 -ms-flex-basis: 330px;
 flex-basis: 330px
}

.sticky {
 position: sticky;
 top: 0
}

My theory is to set <aside> to a fixed width of 330px, then <section> to fill up the rest of the width of <main>.

I stumbled across these notes on -ms-flex that might help future readers:

[gist.github.com...]

[tangor]

testing on older IE

How much older? If older than 10 that's a pretty small population these days.

[csdude55]

I'd like to test IE10 and 11, really. I signed up for BrowserStack awhile back, but now they want me to pay and I just don't know that it's worth paying for! LOL

I miss the good old days, I think it was HTMLBeauty that used to let me run pages in all sorts of different browser emulators!

[not2easy]

There are browser extensions that let you select different browsers and versions to view your work with but most of them don't bother with antiques. For specific css changes, you might visit caniuse to see whether it might be problematic. Links in the Charter: [webmasterworld.com...]