Ayuda para modificar pagina de perfil.

Ok, tengo una duda que llevo tratando de resolver desde hace ya un tiempo y no logro dar con la solución, un par de personas me han explicado (a las cuales agradezco muchísimo) pero no entiendo, necesito que me detallen punto por punto las cosas y en fin, pido disculpas si no me he explico bien y por favor ténganme paciencia.

Tengo rato tratando de editar la pagina de perfil sencillo del foro, este de aquí:

Lo que trato de hacer es que quede así:


Cuando meto codes y todo eso logro que quede de esta forma:

Todo bien hasta ahí, pero luego cuando muevo la imagen para que quede junto al nombre como en la segunda captura, pasa esto:

Queda el espacio en donde se supone que estaba la imagen antes y pues ese vacío que queda se ve mal.
No se como arreglarlo, ya no se como moverlo con css, he tratado demasiado, ya me duele la cabeza, pero se que se puede y voy a hacerlo. Pero ya me di cuenta que necesito ayuda, así que si hay alguien que me brinde un consejito para poder lograr lo que quiero, que es dejar la imagen arriba junto al nombre y quitar el espacio que deja en el campo de datos, se lo agradeceré mucho y se irá al cielo con todo y tenis.

Gracias!

1. Muchas gracias por responder
2. Si bien te entendí, este es el code que ocupo para mover la imagen


Te dejo el link del perfil

¡Uy! No sé si la forma en que yo lo estoy viendo es correcta y aparezcan todos los datos, a mí me aparece el perfil de esta manera en el foro de prueba que me pasaste. Si es correcto o si es así como debe de verse dime, por favor, es decir, no se ve fiel al de tu ejemplo.



Si hay algo de lo que me di cuenta, es que la imagen dentro del circulo, del gif, se ve un poco más arriba de lo que debería. Puedes acomodarlo desde el CSS, a mí me aparece:

Código:

div.prole:nth-child(1) {
    position: relative;
    width: 80px;
    height: 80px;
    overflow: hidden;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    top: -140px;
    left: -540px;
    border: 5px solid #f5f5f5;
}

el top de -140px, lo puse en -126px y se ve un poco más centrado.

También lo que noté es que el cuadro de los datos se ve un poco desproporcionado al de la foto de perfil, si así es como deses que se quede está bien, pero si deseas que esté del mismo tamaño, puedes cambiar el height de 500px  por 400px:

Código:

.profings {
    display: block;
    margin: 10px auto;
    background: #202020;
    padding: 10px;
    border: 1px solid #333333;
    width: 300px;
    height: 400px;
}

Si te sigue apareciendo el espacio ése que mencionas creo que la solición es agregarle también un top, en el CSS el original es éste:

Código:

.prole {
    display: block;
    padding: 5px;
    width: 250px;
    position: relative;
    background: #0f0f0f;
    float: right;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    color: #eeeeee;
    font-weight: bold;
    text-shadows: 1px 1px 1px #0f0f0f;
    margin-bottom: 5px;
    top: -80px;
}

como puedes ver al final del code puse un top de -80px, tú puedes cambiarle el número como desees, espero que eso haya resulto el problema del espaciado superior. Por favor, hazme saber si puede resolver tu problema.

Hola, perdón por no avisar, pero es que como dije arriba, he estado tratando de que quede bien y he movido el codigo bastante, muchas gracias por tu tiempo @Athenea, voy a hacer lo que me has señalado y te aviso como sale. Gracias!