True CSS Positioned Float

Question

http://www.w3.org/TR/css3-exclusions/ Is what I need and IE supports it as can be demonstrated nicely at http://ie.microsoft.com/testdrive/html5/positionedfloats/default.html

however no other browsers seem to support the wrap-flow attribute.

How do I achieve a positioned float on any browser other than IE? (The "excluded block" can be at a fixed position, however everything surrounding it is dynamic in nature.)

Note I have tried the css "shape-outside" attribute: http://jsfiddle.net/ourk5mue/

-webkit-shape-outside: polygon(0px 280px, 100% 280px, 100% 500px, 0px 500px);

however the results are either unreliable (due to occationally disabling line breaking (as seen on chrome)), or not supported (on firefox).

It looks like I'll have to use javascript to manually relocate the DOM element in the document flow. Can this be done only with CSS?

Exclusions are still in the working draft stage, I believe the only way to enable them in, say, Chrome would be to enable experimental features. — Mister Epic, Jan 09 '15 at 20:08

score 1 · Answer 1 · edited May 23 '17 at 11:50

Ended up doing something like this: I execute a function that relocates the target block whenever the surrounding angular ng-repeat blocks change or if the window resizes.

app.directive('onFinishRender', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function () {
          scope.$emit('ngRepeatFinished');
        });
      }
    }
  };
});


    var injectItem = function(ngRepeatFinishedEvent) {
      if (typeof(ngRepeatFinishedEvent) !== "undefined") {
        if (typeof(ngRepeatFinishedEvent.targetScope.item) === "undefined") {return;}
        //other validation
      }
      var index = 2;
      if (window.innerWidth < 1200) {index=1;}
      if (window.innerWidth < 768) {index=0;}
      var secondRow = jQuery('.items').eq(index);
      var injectable = jQuery(".injectable").eq(0);
      if (!secondRow.next().hasClass('injectable')) {
        jQuery(".injectable:not(:first)").remove();
        secondRow.after(injectable.clone().css('display', 'block'));
      }
    };
    $scope.$on('ngRepeatFinished', injectItem);
    window.addEventListener('resize', function() {
      injectItem();
    });

<span class="injectable" style="display: none;">sorta fixed position blah</span>
<span ng-repeat="item in items" on-finish-render class="item">
  surrounding blah
</span>

this answer is based on Calling a function when ng-repeat has finished

True CSS Positioned Float

1 Answers1