â–¼
Streaming live at 10am (PST)

How to imitate flex box but with height, width, and display properties?


#1

I want people with older versions of Internet Explorer to still see pages on my site correctly, so I'm using the regular height, width, and display properties instead of flexbox properties (but function the same).

So I'm wondering how to make all of these inline-block elements to have the same height regardless of how much content is inside. Here is what it looks like:

This screenshot is from the Blog page, for those who want to access the public link, shown below.

I really appreciate all the help!

Thanks,
Josiah


Here is my public share link: https://preview.webflow.com/preview/justonedime?preview=29546121628b83df97aa8d17e9094edb


#2

Hey Josiah. Th same issue was actually discussed this a recent Webflow webinar. What I do personally is to set a defined with say 33.3333% for 1/3 columns; 50% percentage for halfwith columns.

A combination of align-self: stretch and direction: row is what spells doom for older IE browsers. So the trick is to build it first without flexbox (old way using floats; avoid columns altogether) then add flexbox properties after you are satisftied with the layout.

If you were to inspect the code, you would see the old float styles are there even though modern browser will somehow pick up on flex box. The former then acts as a fallback for older IE browsers.

(Long answer huh.. :grinning:)


#3

Well that's the problem: if you look at the blog page from my read-only link, you can see that the columns of the blog posts don't respond to height by percent—they only change when I use pixels for its size.

For example, if I set the height to 620px, it will work, but if I set the height to 33.3%, it won't change at all.

I think the dynamic list element that's set to 1/3 columns may be interfering with this.

Any thoughts?

Thanks,
Josiah


#4

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