Foro de Ayuda IntercambiosvirtualeS - Ejemplo practico, creación de espacio USER

Hola que tal Intercambiosos, en esta ocación le muestro como hacer lo que es el espacio de los user en el foro, más bien se podría llamar espacio de mensajes de los usurios, como poder doctar y ponernos creativos a la hora de hacer cosas que nos inspiren... sin más preambulos al tutorial...

Código html
<style type="text/css">
#contenedor{
width:1024px;
height:100px;
background: rgba(204,204,204,0.6);
border: dashed 1px #333333;
padding:7px;
margin: auto;
}
#contenedor a{
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:13px;
float:right;
margin:0;
padding:56px 0 0 0;
color:#CC0000 !important;
}
.hola{
background: rgba(204,204,204,1);
border-top: solid 1px rgba(153,0,0,1);
width: 900px;
height: 30px;
padding:0 10px 0 0;
float: right;
}
.hola .nombre{
margin:0px;
line-height:30px;
padding: 0 0 0 8px;
color: rgba(255,153,51,1);
font-weight:bold;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
float:left;
text-align:left;
display:block;
}
.hola .tiempo{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000;
font-weight:normal;
text-align:right;
display:block;
margin:0px;
float:right;
padding:0 5px 0 0;
line-height:30px;
}
#avatar{
width:100px;
height:90px;
background: rgba(204,0,51,1);
margin:0px;
padding:0px;
float:left;
color:white;
border: solid 2px white;
}
#avatar .pAvatar{
-webkit-transform:rotate(-37deg);
-o-transform:rotate(-37deg);
-moztransform:rotate(-37deg);
transform:rotate(-37deg);
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
font-size:13px;
padding: 20px 0 0 0px;
text-shadow: 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 10px #FFFFFF, 0 0 45px #FFFFFF;
}
.hola p{
color:#222;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:35px;
}
</style>

Código html
<body>
<div id="contenedor">
<div id="avatar"><p class="pAvatar">Hectorsito20</p></div>
<div class="hola">
<span class="nombre">Hectorsito20</span><span class="tiempo">Hace 7 Minuto</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas at leo eget nisl porta viverra. Ut laoreet, dui at tempus vestibulum, eros leo egestas neque, id adipiscing odio eros et lectus. Vivamus pretium lorem sit amet nulla. Praesent nec dolor at augue ultrices blandit. Quisque aliquet ultrices mi. Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada.
</p>
</div>
<a href="#">Informar</a>
</div>
</body>

Resultado final!

http://i.imgur.com/7crAm.png