Search code examples
htmlcsscss-floatword-wrap

Move a floated box down one line

I am trying to produce an effect similar to a "sidebox" in text, where a note or heading at the start of the paragraph "floats" at the left or the right with some negative space around it, and slightly under the top like the date here:

enter image description here

A simple float like this does not allow me to move the note below the first line so I get one complete line of text:

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
}
<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

Merely setting padding or margins just makes the box bigger, but I want to move the whole thing down. Setting absolute positioning means it no longer reserves space and overlaps.

Is there any way to achieve this (and still have the note come first in the paragraph?)

Solution

  • shape-outside can do this:

    .note {
  float: right;
  margin: 0 0.5em;
  padding-top:1.1em; /* padding equal (or slightly smaller) to one line */
  shape-outside:inset(1.2em 0 0 0); /* this will do the magic */
}

p {
  line-height:1.2em; /* height of a line */
}
    <p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

    with the margin:

    .note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  padding-top:1.2em; 
  shape-outside:inset(1.2em 0 0 0); 
}

p {
  line-height:1.2em; 
}
    <p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>