To create an aside, it's straightforward to pull an element out of its normal flow any giving it a position: absolute and placing on the left so that it appears as a marginal note:

The basic HTML for this:

div.content {margin-left: 15em;}

aside {position: absolute; left: 0;} 

<div class="content">
    <p>Ut accumsan posuere leo non tempor. Maecenas ac metus luctus, imperdiet dui vitae, vehicula dui.</p>
    <aside>This is a marginal note.</aside>
    <p>Sed nisi ante, lacinia ut augue nec, eleifend venenatis quam. Etiam vel lacus aliquam, ornare ligula ut, tincidunt eros.</p>
    <p>Vivamus vestibulum sem et porttitor tristique. Nullam eu laoreet eros. Fusce lobortis luctus ligula. Vivamus eget elit ipsum.</p>
</div>

To create an aside, it's straightforward to pull an element out of its normal flow any giving it a position: absolute and placing on the left so that it appears as a marginal note:

The basic HTML for this:

div.content {margin-left: 15em;}

aside {position: absolute; left: 0;} 

<div class="content">
    <p>Ut accumsan posuere leo non tempor. Maecenas ac metus luctus, imperdiet dui vitae, vehicula dui.</p>
    <aside>This is a marginal note.</aside>
    <p>Sed nisi ante, lacinia ut augue nec, eleifend venenatis quam. Etiam vel lacus aliquam, ornare ligula ut, tincidunt eros.</p>
    <p>Vivamus vestibulum sem et porttitor tristique. Nullam eu laoreet eros. Fusce lobortis luctus ligula. Vivamus eget elit ipsum.</p>
</div>

In this example, to place the note against the second paragraph, I have to put the note in the HTML before the text that it is a note on. Logically, it makes more sense for a note on something to follow the thing it's a note on.

Is there a way to place an item alongside its previous sibling, instead of alongside its next sibling, without also having to apply special styles to the previous sibling? (Can I float an element next to the previous element? is a similar question, but the solutions are not suitable here, and require applying styles to - or at least around - both elements.)

(For context, I am doing this in Sphinx/rST, so doing any additional special wrapping of the main text to achieve the effect would be additionally awkward, and something I'd like to avoid.)

• css
• css-float

Share Improve this question Follow edited Mar 26 at 21:59 Daniele Procida asked Mar 26 at 17:25 Daniele ProcidaDaniele Procida 1,5391010 silver badges2828 bronze badges 4

• If you can't wrap these into an additional div of their own, this would be a use case for anchor positioning - but browser support isn't really there yet, Firefox and Safari can't do it yet. – C3roe Commented Mar 27 at 7:24
• Flexbox could be another option - but you would have to create CSS that matches your specific content, for each individual such HTML section. The wrapper becomes a flex container that allows wrapping, and then the p that follows an aside would not get full width, so that the aside can go next to it. Via the order property the visual order of flex items can be changed - but you would have to assign a matching value to each child of the container than, with the values calculated based on the content. – C3roe Commented Mar 27 at 7:28
• Can there be at most only one note per paragraph or might there be more, in which case what do you want to happen with the vertical spacing in the aside column? – A Haworth Commented Mar 27 at 20:51
• @AHaworth Just one note would be sufficient. – Daniele Procida Commented Mar 27 at 21:12

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You could make .content a grid with the second column having whatever width you want the aside to be - in your example that's 15em.

The first column in this snippet takes up the rest of the horizontal space available.

Here's a simple example:

<style>
  div.content {
    display: grid;
    grid-template-columns: 1fr 15em;
    gap: 10px;
  }

  .content>* {
    margin: 1em;
  }

  /*ensure aside and p have the same margins - browsers may put margins on some elements*/
  .content p {
    grid-column: 1;
  }

  aside {
    grid-column: 2;
  }
</style>
<div class="content">
  <p>Ut accumsan posuere leo non tempor. Maecenas ac metus luctus, imperdiet dui vitae, vehicula dui.</p>
  <p>Sed nisi ante, lacinia ut augue nec, eleifend venenatis quam. Etiam vel lacus aliquam, ornare ligula ut, tincidunt eros.</p>
  <aside>This is a marginal note.</aside>
  <p>Vivamus vestibulum sem et porttitor tristique. Nullam eu laoreet eros. Fusce lobortis luctus ligula. Vivamus eget elit ipsum.</p>
</div>

It's not entirely clear what you're after, but position: absolute might be useful as an option:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.content {
  --padding: 96px;
  --gap: 16px;
  padding-left: var(--padding);
}

.content-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  p{
    position: relative;
  }
}

.note {
  position: absolute;
  inset: 0 auto 0 calc(-1 * var(--padding));
  overflow-y: auto;
  width: calc(var(--padding) - var(--gap));
}

<div class="content">
  <div class="content-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dolorem, eligendi consequatur ex eum optio laudantium voluptas consequuntur ipsa ducimus libero soluta corrupti autem asperiores nostrum velit voluptates praesentium vitae nisi sequi non aliquid earum suscipit amet voluptatibus porro harum cumque deleniti accusamus necessitatibus. Dolore quidem eos dignissimos sint veritatis!</p>
  <p>
    Recusandae, omnis, ad ullam voluptatibus obcaecati corrupti consequatur libero aspernatur veniam dolorum molestiae perspiciatis distinctio mollitia voluptas cum. Recusandae, corporis consectetur eveniet quas in maiores repellendus quia ad molestiae. Dicta, eos cupiditate incidunt aut facere quae animi similique modi neque placeat laborum quidem impedit veritatis ratione quis aliquam quas est.
    <span class="note">This is simple note</span>
  </p>
  <p>Sed, voluptate, at, corporis eligendi facilis nesciunt enim fugiat dolorem alias vel vitae atque rerum delectus et facere qui explicabo fugit consequuntur eius aperiam totam officiis odit consectetur autem recusandae ex sequi repellendus vero sint voluptatum omnis reprehenderit nostrum dolor magni velit tenetur similique hic temporibus eos incidunt dignissimos laborum.</p>
  </div>
</div>