Slide a floating container downward by one line

Question

Slide a floating container downward by one line

I am in search of a way to create a unique text effect resembling a "sidebox" within my writing. The goal is to have a note or heading positioned at the start of a paragraph, floating either to the left or right with some negative space surrounding it and slightly below the top similar to the layout seen in this example:

https://i.sstatic.net/A5W8S.png

Simply applying a float property does not allow me to shift the note below the initial line, resulting in an incomplete look like so:

.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>

Adjusting padding or margins only enlarges the box size without achieving the desired downward movement. As for absolute positioning, it eliminates reserved space and leads to overlapping elements.

Is there a method to accomplish this effect while ensuring the note precedes the paragraph?

html css css-float word-wrap

Answer 1

Answer №1

shape-outside offers a solution:

.note {
  float: right;
  margin: 0 0.5em;
  padding-top:1.1em; /* set padding to match one line */
  shape-outside:inset(1.2em 0 0 0); /* creates the desired effect */
}

p {
  line-height:1.2em; /* defines line height */
}

<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 what I was used to;</p>

including the margin:

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  padding-top:1.2em; /* adjust padding */
  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 what I was used to;</p>

Answer 2

shape-outside offers a solution:

.note {
  float: right;
  margin: 0 0.5em;
  padding-top:1.1em; /* set padding to match one line */
  shape-outside:inset(1.2em 0 0 0); /* creates the desired effect */
}

p {
  line-height:1.2em; /* defines line height */
}

<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 what I was used to;</p>

including the margin:

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  padding-top:1.2em; /* adjust padding */
  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 what I was used to;</p>

Answer 3

Answer №2

After exploring various options, I have found that the Shape-outside technique, as explained by Temani Afif, offers a clean and flexible solution. Despite being initially deemed impossible, there is an alternative method that can be used. By introducing a floated span preceded by a zero-width float with a specified height using a ::before pseudo-element, you can achieve the desired positioning effect. In this scenario, we utilize the height of one text line for the constructed float. Subsequently, the floated span should be configured to clear this constructed float.

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  clear: right;
}

p::before {
  float: right;
  content: '\200C';
}

body {
  width:375px;
}

<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; and saw a costume very unlike</p>

Answer 4

After exploring various options, I have found that the Shape-outside technique, as explained by Temani Afif, offers a clean and flexible solution. Despite being initially deemed impossible, there is an alternative method that can be used. By introducing a floated span preceded by a zero-width float with a specified height using a ::before pseudo-element, you can achieve the desired positioning effect. In this scenario, we utilize the height of one text line for the constructed float. Subsequently, the floated span should be configured to clear this constructed float.

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  clear: right;
}

p::before {
  float: right;
  content: '\200C';
}

body {
  width:375px;
}

<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; and saw a costume very unlike</p>

Answer 5

Answer №3

Unfortunately, it may not be possible to consistently move the content down by one line or a fixed amount of pixels in all cases.

One workaround is to reposition the span element within your HTML structure, placing it later inside the p tag:

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
}

<p>
Feeling exhausted and sick, I trudged across the sandy terrain with my companions towards the hotel. <span class="note">July 29, 1814.</span> For the first time, I heard the cacophony of voices speaking in an unfamiliar language;</p>

Answer 6

Unfortunately, it may not be possible to consistently move the content down by one line or a fixed amount of pixels in all cases.

One workaround is to reposition the span element within your HTML structure, placing it later inside the p tag:

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
}

<p>
Feeling exhausted and sick, I trudged across the sandy terrain with my companions towards the hotel. <span class="note">July 29, 1814.</span> For the first time, I heard the cacophony of voices speaking in an unfamiliar language;</p>

Slide a floating container downward by one line

Answer №1

Answer №2

Answer №3

Similar questions

Is Django_compressor concealing the CSS code?

The text area within the input group is misaligned with the input group button

Changing the position of the icon in the bootstrap validator

When clicked, the DIV expands to fit the size of the window

Steps for making a yii2 inline checkbox listWould you like to learn

Obtain the href using a combination of xpath and id

Adjust the contents of a div to automatically fit within a hidden overflow div

Error: Attempting to assign a value to 'onclick' property of null object [Chrome Extension]

Retrieving PHP information in an ionic 3 user interface

Changing the content of a PHP div with an Ajax callback inside another Ajax callback?

The content within the iframe is not displayed

Inquiring about the best method to determine the intersection point between two lines in Draw i.o

Set up a mouseover function for a <datalist> tag

Navigating through an array in jquery that has been populated by a php script

How to set a default checked value in a custom DropDownList in AngularJS?

What methods does a webpage use to track views and determine when content has been seen?

What are the steps for utilizing the skrollr library to manipulate text within a div without it being

Utilizing iPad, Safari, and CSS to effortlessly fill a page with flexbox properties

The significance of tabindex in CSS

Issue with jQuery DataTables column.width setting failing to meet expectations