Asides (+hanging quotes)

Showcasing pure CSS asides (as well as their limitations)

by danShumway

HTML

<select name="type" selected="aside">
  <option value="aside">Asides</option>
</select>
<section class='aside'>
  <h1>Title Here</h1>
  <p><span class="ldquo">"</span>Voluptatibus voluptatibus ex optio enim ea id. Error qui commodi voluptatem. Incidunt quia delectus ut dolorem voluptas.<span class="rdquo">"</span> Repudiandae consequatur dolorum dolore et inventore doloremque ut molestiae.
    Officia et ut aliquid maiores.</p>
  <img src="http://thewoofblog.thewoofpack.com/wp-content/themes/thesis_18/custom/rotator/TheBubbaCat.jpg" />
  <aside>Maybe you'd like to have a cat picture here. Unfortunately, because each paragraph is floated, you can't float your cat picture inside the paragraph and get text to wrap around it. <span class="hpush"></span></span><span class="ldquo">"</span>In practice, I find it hard to avoid common pitfalls like getting two paragraphs wrapped around an image. I try to avoid floating images.<span class="rdquo">"</span><br><br>But it is a limitation.</aside>
  <p>Soluta aut voluptatem explicabo harum. Accusamus accusamus dolorum ratione facilis repellendus sapiente veritatis ea. Dolor est minus dolores accusamus.</p>
  <p>Quas aliquam modi quo aliquam ullam dolorem. Est cum dolores sed saepe eveniet rerum possimus. Atque rerum laudantium qui error. Qui quia totam et modi aut cupiditate non. <span class='attention'>This paragraph presedes the aside.</span></p>

  <aside>Here is an aside, midway through the article. It can be longer than the paragraph it is attached to, but you need to make sure that your asides don't collide with each other if you do so. If you find yourself in that position, you probably need to either
    rewrite your article anyway, or it's a sign you should be using footnotes.</aside>

  <p><span class='attention'>This paragraph follows the aside.</span> Qui sint eius sequi possimus provident vel. Aspernatur quam dolorem quia officia quod. Accusamus voluptatum beatae consequuntur facere recusandae rerum quia officiis....

CSS

section {
  width: 30em;
  margin: 0 auto 0 auto;
}

.attention {
  color: red;
}

.aside section p,
.aside section aside,
.aside section img {
  margin: 0 0 1em 0;
}

.aside aside {
  float: right;
  font-size: 0.8em;
  width: 13rem;
  padding-left: 2rem;
  margin-right: -15rem;
}

.aside p {
  float: left;
}

.aside img {
  /*chromium adds some extra invisible width for some reason*/
  max-width: 29.7em;
}

.aside .left {
  float:left;
}

.aside aside.preside {
  float: right;
  font-size: 0.8em;
  width: 13rem;
  padding-right: 2rem;
  margin-right: calc(30em + 15rem); 
}

/*---------As a quick bonus, quotation marks--------*/
.rdquo,
.ldquo {
  position: relative;
  color: transparent;
}

.rdquo:after,
.ldquo:after {
  speak: none;
  pointer-events: none;
  color: rgba(0, 0, 0, 1);
  display: inline;
  position: relative;
  margin-left: -1ex;
}

.ldquo:after {
  content: "“";
}

.rdquo:after {
  content: "”";
}

.ldquo {
  margin-left: -0.5em;
}

.hpush {
  margin-right: 0.5em;
}

p::selection,
span::selection {
  background: rgb(120, 120, 120);
  color: black;
}

.ldquo::selection,
.rdquo::selection {
  color: transparent;
}

JavaScript

var select = document.querySelector('select');
console.log(select);