Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/09/2012, 12:55
marcosgue
 
Fecha de Ingreso: enero-2008
Mensajes: 79
Antigüedad: 16 años, 3 meses
Puntos: 1
Problema para posicionar correctamente 2 div dentro de otro!

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:
Ver original
  1. /*CONFIGURACIÓN DE NOTICIAS*/
  2.  
  3. #contenedornoticias{
  4.     position:relative;
  5.     float:left;
  6.     width:575px;
  7.     height:auto;
  8.     margin-left:0;
  9.     margin-top:20px;
  10. }
  11.  
  12. .noticia{
  13.     background-color:#F2F2F2;
  14.     width:100%;
  15.     height:auto;
  16.     margin-top:0;
  17.     margin-left:0;
  18.     margin-bottom:15px;
  19.     padding-top:4px;
  20.     padding-left:6px;
  21.     padding-bottom:2px;
  22.     box-shadow: 2px 4px 7px rgba(0,0,0,0.5);
  23. }
  24.  
  25. .titulonot{
  26.     height:auto;
  27.     width:auto;
  28.     font-size:14px;
  29.     font-weight:bold;
  30.     margin-top:0px;
  31.     margin-bottom:0px;
  32. }
  33.  
  34. .titulonot a {
  35.     color:#222;
  36.     text-decoration:none;
  37. }
  38.  
  39. .separanot{
  40.     margin-top:2px;
  41.     margin-bottom:4px;
  42.     width:375px;
  43.     height:3px;
  44.     background-image:url(imgs/separanot.jpg);
  45.     background-repeat:repeat-x;
  46. }
  47.  
  48. .textonot{
  49.     height:76px;
  50.     width:auto;
  51.     overflow:auto;
  52. }
  53.  
  54. .textonot a {
  55.     text-decoration:none;
  56.     font-style:italic;
  57.     color:#555;
  58. }
  59.  
  60. /*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!