Секция со встроенным стилизованным элементом?

Question

Я пытаюсь выровнять элемент section со стилизованным элементом aside. Я пробовал все комбинации inline, block и inline-block, но, похоже, я ничего не могу сделать. Я не понимаю, почему он не выравнивается так, как должен. Fiddle: http://jsfiddle.net/bmgkB/

Визуально это результат:

... что я хочу получить (приблизительно) здесь:

HTML отрывок:

<aside class="icon"><p>§</p></aside> 
    <section role="region" class="aside"> 
     Welcome to the Pyroneous Lair. There is a variety of features here. 
    </section> 

CSS выдержка:

@charset UTF-8; 

body 
{ 
    background:#000; 
    color:#FFF; 
    width:90%; 
    font:11px tahoma, sans-serif, serif; 
    margin:auto 
} 

article,aside,figure,footer,header,hgroup,menu,nav,section 
{ 
    display:block 
} 

header 
{ 
    text-align:center 
} 

hr 
{ 
    border:none; 
    border-top:medium double #333; 
    color:#FFF; 
    text-align:center; 
    padding:0 
} 

hr:after 
{ 
    content:"§"; 
    display:inline-block; 
    position:relative; 
    top:-.85em; 
    font-size:1.5em; 
    background:#000; 
    z-index:2; 
    padding:0 .25em 
} 

.icon 
{ 
    font:45px serif, "Times New Roman", sans-serif; 
    color:#000; 
    border-radius:100px; 
    text-align:center; 
    width:70px; 
    height:70px; 
    background:#A60000 
} 

.aside 
{ 
    margin-left:5%; 
    display:inline 
} 

Answer 1

Сделать как .aside и .icon быть display:inline-block (и удалить p изнутри icon как он ничего не предлагает ..)

Demo в http://jsfiddle.net/gaby/bmgkB/2/