<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Shape-outside empty horizontal inset, positioned between elements, acts like nothing</title> <style> body { line-height: 0; } .container { width: 600px; } box { display: inline-block; background-color: blue; width: 100px; height: 20px; } .shape { float: left; width: 200px; height: 180px; shape-outside: inset(20px 0px 160px 50px); } </style> </head> <body> <div class="container"> <div class="shape"></div> <box></box><br> <box></box><br> <box></box><br> <box></box><br> <box></box><br> <box></box><br> <box></box><br> <box></box><br> <box></box><br> </div> </body> </html>