title: Position aside part way up in paragraph with CSS
body: <p>I'm writing a blog post using <a href="http://jekyllrb.com/" rel="nofollow">Jekyll</a> in markdown with the <a href="http://kramdown.gettalong.org/" rel="nofollow">kramdown</a> library. I have a true aside that contains <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element" rel="nofollow">"content that is tangentially related to the content around the aside element, and which could be considered separate from that content."</a>  The aside logically goes with the first paragraph of my blog post.  I would like to float the aside next to the first paragraph, ideally part way down it.</p>
  
  <p>The problem is, how can I move the aside up so it is at least part way into the first paragraph?</p>
  
  <p>My HTML (I've translated the markdown to HTML for simplicity):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;article&gt;
    &lt;h1&gt;Blog Title&lt;/h1&gt;
    &lt;p&gt;My first paragraph...&lt;/p&gt;
    &lt;aside&gt;
      &lt;h3&gt;Aside Heading&lt;/h3&gt;
      &lt;p&gt;Aside content...&lt;/p&gt;
    &lt;/aside&gt;
    &lt;p&gt;My second paragraph...&lt;/p&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  
  
  <pre><code>aside
  {
    float: right;
    background-color: grey;
    border: 1px solid black;
    width: 20em;
    padding: 1em;
  }
  </code></pre>
  
  <p>I want something like this:</p>
  
  <pre class="lang-none prettyprint-override"><code>Blog Title
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac consequat erat, eu
  Vestibulum ante ipsum primis in faucibus orci luctus      +---------------+
  et ultrices posuere cubilia Curae; Quisque pellentesque   | Aside here    |
  pretium felis, et adipiscing ante dapibus eget. Aenean    |               |
  nec lacinia eros.                                         |               |
                                                            |               |
  Sem fringilla, id venenatis sem semper. Aenean malesuada  |               |
  mi ac est convallis adipiscing. Sed vitae turpis congue   +---------------+
  nulla ornare malesuada eget ac mi. Phasellus congue porttitor ultrices. Duis posuere
  lorem at ipsum lacinia auctor. Aliquam pulvinar sollicitudin lectus sed vestibulum.
  </code></pre>
  
  <p>I have tried/can't do:</p>
  
  <ol>
  <li>Moving the aside above the first paragraph is not an option because when the post is displayed in an RSS reader the aside is ignored and appears like a regular paragraph. If it is first then it appears before the first paragraph and doesn't make any sense.</li>
  <li>I can't nest the aside into the middle of the paragraph because:
  <ul>
  <li>The aside is a block level element and it isn't valid to nest in the <code>&lt;p&gt;</code> element</li>
  <li>Kramdown won't let me place the aside in the paragraph. (Because it knows it is a block level element?) When I try, the html is escaped so that "&lt;aside>..." appears to the reader.</li>
  <li>When read in an RSS reader the aside content would appear in the middle of my first paragraph, making no sense.</li>
  </ul></li>
  <li>Position relative doesn't help because the text wraps around the aside's original location in the document. </li>
  <li>My reading/searching suggested that using a negative <code>margin-top</code> would work, but it doesn't.  The paragraph text doesn't wrap around it. I assume this is because the aside is after the paragraph in the DOM.</li>
  </ol>
  
  <p><strong>You can see my attempt to use negative margin and play with this on <a href="http://jsfiddle.net/BnB37/3/" rel="nofollow">JSFiddle</a>.</strong></p>
  
  <p>I was surprised the margin top didn't work because it seemed that negative margin left worked in a similar example on an old version of Pownce.com which you can see at <a href="http://web.archive.org/web/20071224051229/http://www.pownce.com/" rel="nofollow">http://web.archive.org/web/20071224051229/http://www.pownce.com/</a> Part way down the page the padlock image has a negative margin left to slide it out of the body of the text and the text wraps correctly.</p>