user profile image

Explains to George how shape-inside and shape-outside work on the same element. See http://georgestefanis.com/experiments/funky-me.html

  • mainText was strictly 900px so the floated #social of 300px fit within the 1200px wide #content, and it did not affect text wrapping for #mainText. 900+300 = 1200, perfect fit, floating here is just for positioning, not wrapping.

  • DOM order: in the original DOM order #social would have never wrapped text from #mainText because it was the last element and floated right. I have reordered the DOM structure for you.
  • shape-outside radius: increased to 150px to make it wrap nicely. 100px radius caused text overlap.
  • optional, commented-out 1200px width on #content to see live wrapping around shape-outside with page resize.

Hope this helps! +Razvan


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.