.row-eq-height cascades and affects subcontainer rows

[kool-kat]

Setting row equal height should NOT filter down and affect second/third level container rows.

It should only affect the row and all child column elements of the row with the .row-eq-height class.

MY situation:

I have a .container with a single row and two columns. In the second column I have a new container with a row and another two columns.

[wrapper div class=.container]
ROW EQUAL HEIGHT CLASS | col-4 | col-8 Has inner layout |
[/ container div]

** Inner layout is **

[wrapper div class=.container]
ROW |col-4| col-7|col-1|
[/ container div]

NO equal height class has been added to the inner row divs, yet the height of each row is affected.

[howardmann]

Equal height rows and centering rows vertically is a much derided limitation that exists in CSS. Best solution would be to use flexbox and stop supporting older browsers (they are used to bad layouts anyway)

[kool-kat]

Hi,

In a perfect world flexbox would be a great solution but from what I have read it doesn't support older android OS which could limit audiences.

Plus I have always taken the hard road to identify solutions that are 'inclusive' of all users even if just for a challenge ;-)

Are you up for a challenge too?