Div de Texto al lado de una imagen
Buenos días a todos
Tengo un pequeño problema. Estoy realizando un sistema de noticias y en la pagina donde muestro las noticias me aparece la imagen y la div del contenido (texto) me sale debajo de la imagen. Yo quiero que el contenido aparezca justamente al lado de la imagen.
En las dos capas, tanto en la de imagen como en la del contenido tengo puesto float:left; pero no se si tengo que poner alguna propiedad mas.
Me podeis ayudar?
Un saludo y muchisimas gracias
Tengo un pequeño problema. Estoy realizando un sistema de noticias y en la pagina donde muestro las noticias me aparece la imagen y la div del contenido (texto) me sale debajo de la imagen. Yo quiero que el contenido aparezca justamente al lado de la imagen.
En las dos capas, tanto en la de imagen como en la del contenido tengo puesto float:left; pero no se si tengo que poner alguna propiedad mas.
Me podeis ayudar?
Un saludo y muchisimas gracias
5
Puntos
Puntos
1516
Visitas
Visitas
3
Resp
Resp
Respuesta #1
buenas, tienes que crear una nueva div que contenga las dos div que tienes con float left y ponerle un alto predeterminado, con forme lo tienes ahora no te funciona por eso mismo por que no tiene un alto máximo
pruébalo y nos cuentas
pruébalo y nos cuentas
5
Puntos
Puntos
Por alber hace 120 meses
Administrador
Respuesta #2
Buenas Alber
Muchas gracias por contestar
<div id="noticieroizquierda">
<div id="subtitulo">INCIENSO COFRADE CATEGORIA</div><br />
<div id="titulo">Titulo de prueba, titulo de prueba, titulo de prueba, titulo de prueba</div>
<div id="comentarios"><img src="img/Comentarios.gif" width="20" height="20" /> 1 Comentario 17/04/2014</div>
<p><br />
<p><br />
<p><br />
</p>
<div id="fotonoticia"><img src="img/misterio.jpg" width="150" height="200" /></div>
<div id="contenidoizq">Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba</div>
</div>
Te adjunto el codigo. Lo que yo quiero que esté al lado de la imagen es la div contenidoizq, y la imagen es fotonoticia. Lo que me dices es que esas dos capas solo tienen que tener otra que la contenga??? no sirve que las contenga la div noticieroizquierda???
#contenidoizq{
width:300px;
float:left;
text-align:justify;
padding-bottom:15px;
padding-right:10px;
}
#fotonoticia{
float:left;
max-width:200px;
max-height:200px;
}
#noticieroizquierda{
width:320px;
float:left;
padding-left:10px;
padding-right:10px;
}
Es que si es una noticia, no le puedo poner un alto no?? porque no se que longitud tendrá la noticia.
Un saludo y muchas gracias
Muchas gracias por contestar
<div id="noticieroizquierda">
<div id="subtitulo">INCIENSO COFRADE CATEGORIA</div><br />
<div id="titulo">Titulo de prueba, titulo de prueba, titulo de prueba, titulo de prueba</div>
<div id="comentarios"><img src="img/Comentarios.gif" width="20" height="20" /> 1 Comentario 17/04/2014</div>
<p><br />
<p><br />
<p><br />
</p>
<div id="fotonoticia"><img src="img/misterio.jpg" width="150" height="200" /></div>
<div id="contenidoizq">Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba,Titulo de prueba</div>
</div>
Te adjunto el codigo. Lo que yo quiero que esté al lado de la imagen es la div contenidoizq, y la imagen es fotonoticia. Lo que me dices es que esas dos capas solo tienen que tener otra que la contenga??? no sirve que las contenga la div noticieroizquierda???
#contenidoizq{
width:300px;
float:left;
text-align:justify;
padding-bottom:15px;
padding-right:10px;
}
#fotonoticia{
float:left;
max-width:200px;
max-height:200px;
}
#noticieroizquierda{
width:320px;
float:left;
padding-left:10px;
padding-right:10px;
}
Es que si es una noticia, no le puedo poner un alto no?? porque no se que longitud tendrá la noticia.
Un saludo y muchas gracias
0
Puntos
Puntos
Respuesta #3
Hola Miguel, la etiquetas
Si colocas una noticia, como dices que no sabes el largo de la noticia y es cierto, y debería ser siempre del mismo alto para que no se vea feo creo que deberías colocarle un "Leer más..".
O sea, le colocas un alto a la caja de noticias y con PHP hacer que se muestren cierta cantidad de palabras y al final colocas un link que lleve a lo noticia por ejemplo "Leer más".
Bueno sobre tu problema. Como podrás notar, el div #contenidoizq tiene un ancho de 300 píxeles, mientras que el div #noticieroizquierda tiene un ancho de 320 píxeles y la imagen que está dentro del div #fotonoticia tiene un ancho de 150 píxeles. Si sumas el ancho de la imagen
Saludos.
<p>No se usan como salto de línea y deben cerrarse, se usa para contener párrafos. Bien que haga la función como salto de línea pero no es lo ideal.
<p> texto </p>
Si colocas una noticia, como dices que no sabes el largo de la noticia y es cierto, y debería ser siempre del mismo alto para que no se vea feo creo que deberías colocarle un "Leer más..".
O sea, le colocas un alto a la caja de noticias y con PHP hacer que se muestren cierta cantidad de palabras y al final colocas un link que lleve a lo noticia por ejemplo "Leer más".
Bueno sobre tu problema. Como podrás notar, el div #contenidoizq tiene un ancho de 300 píxeles, mientras que el div #noticieroizquierda tiene un ancho de 320 píxeles y la imagen que está dentro del div #fotonoticia tiene un ancho de 150 píxeles. Si sumas el ancho de la imagen
<div id="fotonoticia"><img src="img/misterio.jpg" width="150" height="200" /></div>Más el ancho del div #contenidoizq resulta 450 píxeles y el div principal que es el #noticieroizquierda tiene 320 píxeles por eso es que no se te da. ¿Cómo solucionarlo? Puedes colocarle al div principal 460px o colocarle un ancho AUTO y colocarle
display:inline-block;
Saludos.