Problema para posicionar correctamente 2 div dentro de otro!

[marcosgue]

Como estan?

Tengo un problema, estoy intentando colocar 2 div dentro de uno mismo con el cual muestro noticias. La pagina está realizada con una maquetación a 2 columnas, en la del a izquierda muestro las noticias.

el mismo se ve así


Esta es la configuración HTML y CSS

Código HTML:

<div class="noticia">
	<div class="titulonot">TITULO DE LA NOTICIA</div>
	<div class="separanot">ESTA ES LA LINEA ROJA QUE ESTÁ CONFIGURADA EN EL CSS</div>
	<div class="textonot">TEXTO DE LA NOTICIA</div>
</div> 

Código CSS:

/*CONFIGURACIÓN DE NOTICIAS*/
 
#contenedornoticias{
    position:relative;
    float:left;
    width:575px;
    height:auto;
    margin-left:0;
    margin-top:20px;
}
 
.noticia{
    background-color:#F2F2F2;
    width:100%;
    height:auto;
    margin-top:0;
    margin-left:0;
    margin-bottom:15px;
    padding-top:4px;
    padding-left:6px;
    padding-bottom:2px;
    box-shadow: 2px 4px 7px rgba(0,0,0,0.5);
}
 
.titulonot{
    height:auto;
    width:auto;
    font-size:14px;
    font-weight:bold;
    margin-top:0px;
    margin-bottom:0px;
}
 
.titulonot a {
    color:#222;
    text-decoration:none;
}
 
.separanot{
    margin-top:2px;
    margin-bottom:4px;
    width:375px;
    height:3px;
    background-image:url(imgs/separanot.jpg);
    background-repeat:repeat-x;
}
 
.textonot{
    height:76px;
    width:auto;
    overflow:auto;
}
 
.textonot a {
    text-decoration:none;
    font-style:italic;
    color:#555;
}
 
/*FIN NOTICIAS*/
 

Bueno el tema es el siguiente

Lo que necesito hacer es que donde tengo el div "textonot" haya 2 div, uno a la izquierda de 76*76px donde voy a poner una imagen en relación a la noticia.

y a la derecha el espacio restante ocupado por texto not.

Lo solucioné con una tabla, el tema es que me gustaría mantener el scroll que tengo en el sector de textonot así cuando mueva el scroll la imagen siga estatica en div a la izquierda.

Dejo abajo una imagen de lo que quier conseguir.

Probe con float, con position absolute, y alguna otra cosita que no recuerdo pero se me desconfigura todoooo.



Bueno espero alguna recomendación así lo pruebo y les digo que tal.

Muchas gracias a quien derroche un poco de su tiempo en ayudarme.

Saludos!

[rex16]

me parece que estas cayendo en el error de usar divs para todo, puedes hacer uno solo por noticia, el titulo un parrafo, la linea un <hr /> el contenido otro <p> y posicionar la imagen con align

[marcosgue]

El tema es el siguiente, el titulo debe ocupar hasta la totalidad del DIV noticias a lo ancho, pero la linea roja no! por tal motivo no utilizo HR. intenté usar directamente la imagen pero no podía de esta manera manejar el margen superior de la linea y el inferior, sin embargo con los div puedo especificar exactamente cuanto margen superior e inferior dejar.

Por otra parte, el scroll debe mover solo el contenido de la noticia el titulo y la imagen debe quedar estatica, por esto es que necesito tener el texto de la noticia en un div individual para poder darle overflow:auto y tener Scroll en caso de que el contenido lo requiera.

Desde ya muchas gracias.

[pzin]

Concuerdo con rex16 en el diagnóstico de tu divitis.

Algo más simple, igual de efectivo:

Código HTML:

​<div>
<span>Título</span>
<img src="rutaimagen.png" />
<p>Texto noticia</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
 

Código CSS:

div {
    width: 575px;
}
 
span {
    display: block;
}
 
img {
    float: left;
    width: 76px;
}
p {
    height: 76px;
    overflow: auto;
}
 

[marcosgue]

Ahhh desconocía que se podía utilizar overflow fuera de los div, ahora lo veo más claro, hago las pruebas y comento que tal!!!

Gracias por la ayuda!

[pzin]

Casi todo se puede aplicar a casi todo.

CSS es un poco como los insultos y los políticos, a todos les queda de perlas cualquiera.

[C2am]

Con respecto a lo que propone Bonez, tal vez sugeriría que el título esté entre etiquetas <h3> o <h4> etc, digo, al fin y al cabo para eso están, y sobre todo porque son título de noticias, y no encabezados de secciones.

Saludos

[rex16]

Iniciado por Bonez

... como los insultos y los políticos, a todos les queda de perlas cualquiera...

Cuanta sabiduria en una sola linea

[marcosgue]

Bueno la verdad con esto que me dijeron de que puedo usar CSS en casi todo, pude hacer perfectamente lo que buscaba con sus consejos...

Además me abrieron mucho mas las posibilidades en cuanto a lo que entendía de CSS y estoy modificando un monton de otras cosas.

Gracias de verdad!

[anewryzm]

Bueno. Para empezar no me tomé el tiempo de leer todos los comentarios.

Te recomiendo que utilices
--> "position:fixed"
Y que le agregues las cordenadas con.
--> "top: "
--> "right: "
--> "bottom: "
--> "left: "

Según donde lo quieras.
Para que no se mueva la imagen del div que lo contiene o mejor dicho no se salga de la noticia correspondiente, al contenedor de toda la noticia con sus elementos dale los atributos
---> "position:relative"

Espero te sirva. Trata de experimentar.
Los atributos "position:fixed" son poderosos.
Tambien te recomiendo que investigues acerca de las librerias:
- [URL="http://jquery.com/"]jQuery[/URL].
- [URL="http://jqueryui.com/"]jQueryUI[/URL].
Lee. Son herramientas bastante útiles.

Espero te sirva de ayuda. Perdón por no leer todos los comentarios :).
Salu2

[pzin]

anewryzm, en las normas el foro, el número 2.6, explica el porqué de que tus enlaces no aparecen como debe ser.