1

I have a "backend engineering constraint" that's forcing me to order my markup in a non semantic way but visually my team needs a different order. I was successfully able to achieve this with flex box and have attempted to polyfill with flexibility.js for IE 10 and 9. Unfortunately both 10 and 9 are having issues.

Note that I can not use jQuery/DOM manipulation to move "third" section around.

Does any one else have alternate suggestions or fixes that can help achieve the following:

Markup:

<div class="first"> <div class="second"> <div class="third">

But they need to visually see the following in IE 10 and 9:

Flexbox reordering and wrapping.

So "first" and "third" need to appear visually as apart of the same section and the "second" section needs to be underneath and go full width of container.

Please see my full working codepen (fully working in chrome): http://codepen.io/semantictissue/pen/MypRVz

Any suggestions or help to make this cross browser friendly?

Jonas
  • 41
  • 1
  • 8
  • Can you use CSS positioning? Such as position: relative? – user2182349 Apr 01 '16 at 02:24
  • Not sure there's any reliable polyfill for flexbox in IE 9. And IE10 is based on an older version of the spec. Not an easy task you have. Here's some more guidance: http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Apr 01 '16 at 02:26
  • @4castle unfortunately not just a simple rearrangement of item order -- achieving "columns" for "first" and "third" while also visually sectioning off "first" and "third" is the challenge here. – Jonas Apr 01 '16 at 04:45

1 Answers1

0

The easiest solution I've found is to position .third as absolute. To visually section off .first and .third, add CSS to .first which leaves room for .third to be set in the remaining space.

body { margin: 0; position: relative; }
.first  { height:50px; width: 50%; background: blue; }
.second { height:50px; width:100%; background: gray; }
.third  { height:50px; width: 50%; background:green;
          position: absolute; top: 0; right: 0;      }
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>

Here is your modified CodePen

The main downside to this approach is that it doesn't reflow the content as the window gets smaller. Media queries would have to be used at certain window sizes which change the width and positioning of the elements as needed. Using a CSS table layout would be useful once the content can be wrapped onto its own line. Info here

Community
  • 1
  • 1
4castle
  • 32,613
  • 11
  • 69
  • 106
  • I also tried using `float` and `display: table` but neither of them could get `.third` onto the same row as `.first`. – 4castle Apr 01 '16 at 05:25
  • Does this answer your question? It's been a few days, and you haven't said anything or selected my answer. – 4castle Apr 03 '16 at 03:36
  • Yeah this is a tricky one -- I pos:absolute causes problems with content run-in when the window is resized, but I think you're right this is the closest I can get as a fallback. – Jonas Apr 07 '16 at 16:18