Why don't inline blocks wrap around floating elements?
Why don't inline blocks float around floated elements when they are taller than this floated element?
div {
height: 3em;
width: 3em;
border: 1px dotted;
float: left;
}
p {
display: inline-block;
width: 90%;
}
<div></div>
<p>In metus tortor, tristique imperdiet ultrices quis, cursus in tellus. Nunc lacinia tristique purus, ut pretium justo eleifend tempor. Ut dictum ac ex ut molestie. In posuere lacus ac volutpat consectetur. Donec pharetra eu lectus a luctus. Morbi et cursus orci. Donec a scelerisque magna. Morbi a vulputate risus. Nunc volutpat est non ipsum porttitor rutrum. Aliquam eu tortor quis ligula fermentum rutrum. Aenean nibh tellus, varius sit amet posuere quis, efficitur in quam. Cras fringilla tortor sit amet nibh lacinia rhoncus. Quisque orci quam, feugiat at auctor maximus, vestibulum a velit.</p>
Blocks and inline elements behave as expected.
source to share
spec says
A table field boundary, block-level override element, or an element in normal flow that sets new block formatting context (for example, an "overflow" element other than "visible") must not overlap the field field of any floats in the same block formatting context as the element itself.
And the Block Formatting Context is defined as follows
Floats, absolutely positioned elements that block containers (for example, inline blocks , table-tables, and table headers) that are not block boxes and "overflow" block boxes other than "visible" (except when this value has been propagated in the viewport ), set new block formatting contexts for their content.
(Underline mine)
source to share
They make. Your code is wrong. The tag <div>
does not wrap the tag <p>
, and you have an explicit height set in the tag <div>
, so the content will spill out.
This is better:
<div style="width: 400px; border: 1px dotted red; float: left;">
<p style="display: inline-block; width: 50%;">Lorem Ipsum...</p>
</div>
source to share