1

Basically looking for a way to pull off CSS Shapes without using a polyfill.

I've got a <div/> full of content. Just outside of this div I have a small <aside/> component I need to have floated to the left and with the content wrapping around it, above, to the right and below. (See image below.) This isn't a simple float because the floated element won’t be aware of the beginning or ending of the wrapping content.

You'll see in the image below that the floated object appears to begin inside of the first paragraph. But the object must actually live outside of the content div in the DOM tree.

I know there is a CSS Shapes spec in the works, but don't believe it's supported anywhere yet.

Is it yet possible to pull something like this off without a CSS Shapes polyfill?

enter image description here

Brandon Durham
  • 7,096
  • 13
  • 64
  • 101

1 Answers1

0

Assuming you want the object to be outside the div that contains the text, if you can manage to split your Ajax result into 2 divs or paragraphs your code would look like:

<div>Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text </div> 
<div id="yourFloatedDiv" style="float:left"></div>
<div> Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
Anthony N.
  • 295
  • 3
  • 16
  • But you see, this would only float the div inside of the second paragraph. I'm looking to have all content wrap around the figure. See the CSS Shapes Module: http://www.w3.org/TR/css-shapes/ – Brandon Durham Nov 12 '15 at 13:09
  • @BrandonDurham looks interesting. does it work on every browser ? – Anthony N. Nov 12 '15 at 17:36
  • It doesn’t, hence the request for a workaround. There are [polyfills](https://github.com/adobe-webplatform/css-shapes-polyfill), but if possible I'd like to rely on CSS alone. – Brandon Durham Nov 12 '15 at 21:27