Equal height columns without js

[Linda_A]

I am wondering if it is possible to move my current layout away from using the matchheight javascript to purely using css to ensure that the sidebars and the main content column always come out the same height? I was told that it might be possible using display:table or using using flexbox, but I am afraid I am nowhere near good enough with css to be able to implement that myself — or to even tell whether those methods are compatible with my current layout, which uses this approach: http://www.responsivegridsystem.com. The current state of the layout can be seen at http://www.westeros.org/ and I’ve put up the relevant html & css in CodePen: http://codepen.io/Linda_A/pen/bwGLpr

I didn’t bother with the javascript since it isn’t a bug issue, but an issue with how (if possible) to rework this to work without the script.

[Paulie_D]

Flexbox is probably the simplest…you can use your existing CSS and just add display:flex to your rows (sections in this case)…and, bingo equal height.

http://codepen.io/Paulie-D/pen/EgxEJE

This is nice because you have a fallback in case the broswer doesn’t support flexbox.

---

CSS Tables are a little trickier as margins are off etc. Support it better (IE8) but the extra work (and possibly extra markup) probably isn’t worth it.

http://codepen.io/Paulie-D/pen/JRjLqa

Of the two, flexbox is the future…and support is pretty good.

[Linda_A]

Thank you, that looks very promising.

One question about the flexbox approach … you add the .tall class and apply it to the middle content. Does it depends on the middle content always being the tallest, or how does this function?

Edited to add: nevermind, now I see you did that just to demonstrate, of course!

However, I am testing out display:flex on the site, and it seems to come with an unfortunate side-effect for a responsive design — the columns no longer stack on top of each other below the break point, so the effect of collapsing the site to a single column is lost.

[Paulie_D]

That where setting flex-wrap:wrap comes in…

Chris has THE definitive guide to flexbox right here….search it out. I use it all the time.

[Linda_A]

Alright, will check it out, see if I can make sense of it and of where to set the flex-wrap:wrap. :) This layout is my first time with a responsive design and I can’t say I have my head fully wrapped around how the css I am using is actually working.

[Paulie_D]

Basically, a flex-container won’t wrap it’s contents unless specifically told it’s allowed…with flex-wrap:wrap.

Note: CSS Tables, like actual tables, won’t wrap regardless.

So, if set that it’s just a matter of a media query to change the width (or more likely the flex values) of our columns to 100% at a lower viewport size.

http://codepen.io/Paulie-D/pen/gwOBWX

[Linda_A]

Thanks a lot, I have the basic implementation working now. :) And I will definitely be looking at using more of flexbox for some elements, like galleries.

I am also pondering if flexbox might make sense for a horizontal menu that you want to turn vertical at small sizes, instead of the usual list floated left. Though of course the list allows for submenus.

[Paulie_D]

Indeed…if I see anything in a line (or a column for that matter), my first thought is flexbox these days.

But the same was true of floats and inline-block when they first were added to CSS.

Flexbox for menus is no different than floats/inline-block…positioning with flexbox is exactly the same regardless, so everything you were doing still works.

Flexbox isn’t a magic bullet that solves all issues but it goes a long way to solving many of the problems associated with linear layout methods.

CSS Grids also show promise to me but I find them incredibly complex and the syntax is confusing (at least to me)…plus I’m not convinced they’re much better than flexbox.

Flexbox will really come into it’s own once display:contents gets more support as it will allow us to wrap and unwrap flex-containers at will…then more complex layout that flexbox can’t achieve now will be child’s play.

[Mooks]

I love Flexbox… it’s the future as you said. But even if the first time it appeared was 7 years ago (!?!!?), the thing is its support seems limited.

I’m not speaking about ie 8-9 which represent 1% of the total browser usage… nor IE 10-11 which support it near entirely with vendor prefix. The problem seems to be on iOS.

Just do the test, in a site like https://www.browserstack.com/responsive and you’ll see that your flexbox element will not show up.

That the only point which irritates me about flexbox: the lack of support… even if it becomes more and more supported with months. I’m using an overal home made grid for my general responsiveness, and use flexbox only for some specific element yet. With better native support, I would already forgotten my old grid for a flexbox one. Cleaner, easier, faster…

[Paulie_D]

Well that’s IOS and Safari for you…underdeveloped and non-supportive of many features that are well out of beta for all other browsers.

They’re so far behind the curve it should be embarrassing for them but, no, they keep plowing along ignoring the obvious.

Until we stop using sub-standard products like that they won’t learn.

[Mooks]

I agree, but if you expect to monetize your site, you have to take this into account. Related to this, this is a lot of people to take care about : https://www.w3counter.com/globalstats.php

[bearhead]

caniuse reports that flexbox is supported by iOS safari and Opera Mini:
http://caniuse.com/#feat=flexbox

Support is at almost 97%… that’s higher than css 2d transforms

If you’re having problems with those two browsers then the issue is probably something unrelated to flexbox support.

[Mooks]

The thing is https://www.browserstack.com/responsive is using very outdated browser/OS. That’s the issue, my flexbox css is properly written. Allright, i’ll maybe think about a flexbox grid for my overall website setting, instead of my old one.

I hope i’m not doing the bad choice.

[bearhead]

I think you’ll be fine as long as long as no support for ie8/9 is ok. iOS safari support for the new flexbox syntax goes back as far as 7.1, and caniuse reports that versions 6.1-3.1 of iOS have less of a market share than ie6 o.O

Make sure you’re using browser prefixes…

[Mooks]

I don’t care of IE 8/9, only some pharma corp uses it… I’m using autoprefixer, so it will ok for prefix vendor.

[Author]

Posts