Question

Let’s say I have a normal text in a paragraph (<p>…</p>). Now I want to place a box with, for example, ads or additional information somewhere in the text to the right or left. It should not be above or below the text; the text should align itself around the box.

How would I do this? I tried with span and div, but I failed so far.

Answer 1

Use <div> with float CSS property.

<p>
    <div style="background-color: red; height: 100px; width: 100px; float: right"></div>
    XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX 
    XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX 
    XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX 
    XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX 
    XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX 
</p>