div dentro de div background no responde

[KeKaR0k]

Hola he visto como esta comunidad ayuda a las personas y me parece excelente ... porque cada post que he visto todos intentan que sea didáctico para el que pregunto.

Ahora es mi turno de aprender ... vengo trabajando hace 3 meses con css y divs ... y me costo adaptarme pero al final me pareció mejor.

Ahora tengo un problema les pongo el codigo y la imagen de como se ve.

Código:

<div id="contenido_2">
        <div id="contenido_productos">
        	<div align="center"><img src="img/logo.png" /></div>
      		<div id="texto_productos">
       	    <p class="texto13px">&nbsp;</p>
       	    <p class="texto13px">*Repelente de origen natural extraído por un prodecimiento patenteado<br />
          *Efectividad y tolerabilidad comprobadas<br />
          *Formula sin repelente químico, sin alcohol<br />
          *Para toda la familia, mismo niños</p>
       	    <p>&nbsp;</p>
          <p class="texto16px">Composición : 10% de ACEITE CONCENTRADO </p>
          <p class="texto16px">DE CITRONELA de origen natural </p>
          <p>&nbsp;</p>
          <p class="texto13px">Rechaza los insectos picadores tales como : Los mosquitos,</p>
          <p class="texto13px"> anopheles, aedes, culex, etc. que son vectores de enfermedades</p>
          <p class="texto13px"> como el paludismo, el dengue, el chikungunya, etc. </p>
          <p class="texto13px">tambien los tabanos, avispas, abejas, moscas de la arena, entre otros.</p>
          <p class="texto13px">&nbsp;</p>
          <p class="texto13px">&nbsp;</p>
          <p class="texto13px">*Respetar los consejos de uso : <br />
          En zonas de alta exposicion a mosquitos es aconsejable el uso</p>
          <p class="texto13px"> asimétricamente de 2 brazaletes :uno en la muñeca y el otro en</p>
          <p class="texto13px"> el tobillo. Renovar el brazalete cuando la protección disminuye.</p></div>
          <div id="img_productos"><img src="img/img1_productos.png" /><br />
          							<img src="img/img2_productos.png" /><br />
                                    <img src="img/img3_productos.png" /></div>
        </div>

Este es la parte del css:

Código:

#contenido_2 {
	width:729px;
	border-left-style:solid;
	border-left-color:#82cf33;
	border-left-width:3px;
	border-right-style:solid;
	border-right-color:#82cf33;
	border-right-width:3px;
	margin-left:auto;
	margin-right:auto;
}

#contenido_productos{
	clear:both;
	height: auto!important;
	height:459px;
	min-height: 459px;
	background-image:url(img/fondo_productos.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	text-align:left;
	background-color:#3C866F;
}

#texto_productos{
	float:left;
	width:479px;
	padding-left:21px;
}

#img_productos{
	width:218px;
	float:right;
	text-align:right;
	padding-right:11px;
	padding-top:25px;
}

aca la imagen del problema:

imagengratis.org/images/nomosquito.png

El problema es cuando el div texto_productos se alarga las propiedades del background del div contenido_productos no se aplican.

[Mikmoro]

Añade justo antes de cerrar el div #contenido_productos este otro:

<div class="corte"></div>

y ahora añade al css:

.corte {clear: both;}

[kseso?]

¿Probaste a "limpiar el flotado" y utilizar las declaraciones "conjuntas" (shorthands)

Código css:

#contenido_productos{
    clear:both
    background: #3C866F url(img/fondo_productos.jpg) no-repeat left bottom;
    text-align:left;
    overflow: auto;
    min-height: 459px;/*prescindible si no necesitas ese tamaño mínimo*/
}
 

Oppsss! por dormirme. Bueno es otra forma. Ahora ya puedes elegir.

[KeKaR0k]

Iniciado por Mikmoro

Añade justo antes de cerrar el div #contenido_productos este otro:

<div class="corte"></div>

y ahora añade al css:

.corte {clear: both;}

Sos el Dios del CSS !!!

Muchisimas gracias!!!

Algo tan simple y tan rompe bolas!! jejeje

Muchisimas gracias

[Mikmoro]

De nada, es un placer.

Aprovechando, kseso? (y todo el que lo haya pensado): ¿por qué en este caso no se podría usar el overflow: auto en el contenedor padre? ¿por qué he legido el método del corte?

[KeKaR0k]

Iniciado por kseso?

¿Probaste a "limpiar el flotado" y utilizar las declaraciones "conjuntas" (shorthands)

Código css:

#contenido_productos{
    clear:both
    background: #3C866F url(img/fondo_productos.jpg) no-repeat left bottom;
    text-align:left;
    overflow: auto;
    min-height: 459px;/*prescindible si no necesitas ese tamaño mínimo*/
}
 

Oppsss! por dormirme. Bueno es otra forma. Ahora ya puedes elegir.

Esto es un hack para ie6 por eso lo dejo

Código:

height: auto!important;
	height:459px;
	min-height: 459px;

Y el tema de las declaraciones conjuntas ... recien me entero que asi se llama. Yo no se en que orden van por eso no las uso .. yo aprendi de la vida esto ... jejeje. capas que con el tiempo las uso.

Gracias

[kseso?]

height:459px;
min-height: 459px;/*prescindible si no necesitas ese tamaño mínimo*/

Un saludo.

[Mikmoro]

Exacto: en IE6 no crecería y sacaría el scroll, y sólo en IE6 porque "height: auto!important;"