Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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
5
Puntos
1512
Visitas
3
Resp
Por MiGuEJeReZ hace 120 meses
Avanzado Sitio web
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
5
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
0
Puntos
Por MiGuEJeReZ hace 120 meses
Avanzado Sitio web
Respuesta #3
Hola Miguel, la etiquetas
<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.

5
Puntos
Por Jose hace 120 meses
Experto Sitio web
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate