Note 的な aside 要素をネガティブマージンを使わずに

こんな感じの、NOTE部分は ::before 等のCSSで書き、回り込みなしのブロックを作るやり方を模索してた。

ネガティブマージン

まぁ楽ではある

aside.note {
  padding-left: 6em;
}
aside.note::before {
  content: "NOTE";
  margin-left: -5em;
  float: left;
}

<aside class="note">
  <p>............</p>
  <p>............</p>
</aside>

• ネガティブマージンはバッドノウハウ

Negative values for margin properties are allowed, but there may be implementation-specific limits.

http://www.w3.org/TR/CSS2/box.html#margin-properties

ほとんどのUAでサポートしているらしいけど、仕様的に不安だよね。

display: flex

flexboxにして、::beforeの擬似要素とcontent部分を横並びにする。

aside.note {
  display: flex;
  flex-direction: row;
  flex: 1;
}
aside.note::before {
  content: "NOTE";
  width: 5em;
}

<aside class="note">
  <div>
    <p>............</p>
    <p>............</p>
  </div>
</aside>

• div が汚い
• 対応ブラウザが問題

display: table, display: table-cell

最強のtable系のdisplay

aside.note {
  display: table;
}
aside.note::before {
  display: table-cell;
  width: 5em;
  content: "NOTE";
}

<aside class="note">
  <p>............</p>
  <p>............</p>
</aside>

デメリットは無さそう。凄く負けた感じがするけど。

display: list-item

ハッキーな手法

aside.note {
  display: list-item;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="20"><text x="16" y="16">NOTE</text></svg>');
  margin-left: 5em;
}

画像の用意が面倒なのでSVGで。

最後に

一応ルールとして任意のコンテンツが入るだろうから、height指定はしてはいけない。
さらにaside要素以降も文章が続くことを想定すべし（コンテンツ同士が重なって表示されるようなスタイルはダメ example:posigion:abusolute）。
あと、スタイルために要素追加も出来るだけしない。
他に何かある？

因みに、ほとんどの案を Mozilla Japan の中野さんから頂いた。どっちも酒を飲みながらｗ 良い酒の肴でした

追記(2013-06-11)

hail2u さんが hang label of aside という position:relative; と position:abusolute の例を挙げてくれました。