Qué tal? Tengo un inconveniente que estoy intentando resolver. Tengo una imagen con posicionamiento flotante a la derecha de un texto. Luego se me pidió que cierta información se disponga debajo de la imagen, y que el texto que está a la izquierda siga respetando ese posicionamiento. Para agregar el texto, dado que la imagen tiene un borde creé dos DIV: uno para contener el DIV de la foto y el nuevo DIV con la información. En CSS tengo el siguiente código:
Código:
#container_foto
// DIV que contiene foto y texto
{
height: 400px;
width: 170px;
float: rigth;
padding: 4px;
margin: 0px 34px 10px 13px;
}
#foto
// Foto a mostrar en el DIV #container_foto
{
height: 150px;
width: 150px;
margin: 0px 34px 10px 13px;
padding: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
display: block;
}
#datosfoto {
// Información a mostrar debajo del DIV #foto
height: 50px;
width: 150px;
margin: 0px 0px 0px 2px;
padding: 4px;
display: block;
}
#descripcion {
// Descripción que envuelve a los DIV de arriba
width: 950px;
height: auto;
text-align: justify;
padding-left: 16px;
display: block;
}
Ahora bien, cuando llamo a los elementos desde el HTML, me muestra la foto arriba a la izquierda junto con el texto, y el texto con la descripción abajo. ¿Qué podré estar haciendo mal? Muchas gracias!