Al acomodarlo a la izquierda me ocuparía el lugar donde van los widgets y hacerlo más pequeño sería mi última opción así que si alguien sabe una solución lo amaré eternamente:(
PD: Hacer el postbody más grande no me funcionó tampoco, el texto comenzaba a cortarse como el perfil.
Así es como está ahora:
Así me gustaría que quede:
- CSS:
- Código:
/*edita la respuesta*/
.postbody .content {
font-size: 1.3em;
width: 550px;
text-align: justify;
margin-top: 10px;
margin-left: -5px;
}
/*PERFILES DE LOS PERSONAJES*/
#perfil-cuerpo {
background-color: #fcfcfc;
outline: 1px solid #f3f3f3;
border: 5px solid #fcfcfc;
margin: 1px;
width: 205px;
overflow: hidden;
margin-left:60px;
margin-top: 60px;
}
#perfil-avatar {
outline: 1px solid #f3f3f3;
border: 5px solid #fff;
margin: 1px;
width: 205px;
height: 320px;
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
}
#perfil-img img {
width: 205px;
height: 320px;
position: static;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
transition-delay: 2s;
}
#perfil-datos {
width: 210px;
position: absolute;
display: block;
margin-left: -10px;
margin-top: -315px;
overflow: hidden;
}
#datos-info {
outline: 1px solid #f3f3f3;
background: #fcfcfc;
margin: 1px;
margin-bottom: 6px;
padding: 5px;
margin-left: 210px;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
transition-delay: 2s;
}
#info-cont {
width: 205px;
background: #fff;
outline: 1px solid #f3f3f3;
margin: 1px;
margin-bottom: 3px;
padding: 2px;
font-family: verdana;
font-size: 8px;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
}
#info-sep {display: none;}
#perfil-rango {
outline: 1px solid #f3f3f3;
border: 5px solid #fcfcfc;
background: #fff;
margin: 1px;
margin-left: 250px;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
transition-delay: 2s;
}
#perfil-cuerpo:hover #perfil-img img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#perfil-cuerpo:hover #datos-info, #perfil-cuerpo:hover #perfil-rango {
margin-left: 0px;
transition-delay: 1s;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#perfil-cuerpo:hover #datos-contacto {transition-delay: 2s; }
#perfil-cuerpo:hover #perfil-rango {transition-delay: 3s; }
#perfil-fijo {
outline: 1px solid #f3f3f3;
border: 5px solid #fff;
background: #fff;
margin: 1px;
width: 205px;
text-align: center;
}
#perfil-nombre, #perfil-nombre a {
font-family: 'Lobster';
font-size: 22px;
line-height: 22px;
text-align: center;
padding: right: 5px;
display: block;
}