HTML and CSS Reference
In-Depth Information
/* flow the content inside this element */
-webkit-wrap-shape-mode: content;
}
.exclusion {
position:absolute;
height:250px;
width:300px;
/* flow text around this element */
-webkit-wrap-shape-mode: around;
}
.ad{
top: 20px;
left: 100px;
border: 1px solid #000;
-webkit-wrap-shape: rectangle(300px, 250px 300px,250px 250px,300px 250px,250px);
}
#workspace{
position:relative;
width:80%;
}
</style>
</head>
<body>
<div id="workspace">
<div id="exclusion1" class="exclusion ad"> 300x250 </div>
<div id="container">
<p>Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing
elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget
pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a
sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium
pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa,
pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget
est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt
rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing
elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la.
Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec
ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a
nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec
ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in.
Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus,
in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere
con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la
con­sec­te­tur eu.</p>
<p>Lo­rem ip­sum do­lor sit amet, con­sec­te­tur
ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum
sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end
por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue.
Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum
