div como contenedor

Buenas y santas...
Quiero hacer lo siguiente: en un div quiero poner un bullet, un texto (sin usar el tag <UL><LI>), este div contenedor debe tener un border de color de un pixel y SOLId abajo. Lo que hago es esto:

Código :

<div id="contenedor" style="position:relative; clear:both; width:420px; border-bottom:solid 1px #FF0000;">
   <div style="width:17px; height:17px; position:relative; float:left;"><img src="/ximages/bullet_flecha.png" /></div>
    <div style="width:403px; position:relative; float:right;">prueba</div>
</div>

Esto lo hice de prueba, el resultado de esto es que el div CONTENEDOR no se resuelve como tal, sino que se muestra como un div vacío por lo que el resultado es la línea roja se ve por encima de todo (esto en Firefox y en Safari... EEEENNNNNN IE se ve perfecto!!!!! chan!chan!chan!)

Ahora... si le quito los FLOAT al div que contiene la imagen y el texto se ve bien... por qué? cómo soluciono esto?

Gracias a todos por los aportes... abrazos grandes... Emiliano

#contenedor{
overflow:auto;
width:420px;
border-bottom:solid 1px #FF0000;
}
#contenedor p{
text-indent:20px;
background:#fff url(/ximages/bullet_flecha.png) no-repeat;
vertical-align:middle;
}

<div id="contenedor">
<p>texto uno</p>
<p>texto dos</p>
</div>

probá con eso!

claro que contenedor se muestra vacio pues todo su contenido esta flotando, ya sea con position absolute o float

por cierto, no mezcles el css con el html eso es feo

Hola y gracias...

pero el overflow no es solución a lo mío.
Por empezar el overflow no está vacío.
el overflow (auto) pone scrolls y no los quiero y mantiene el tamaño (en alto) por más que no los ponga (los scrolls)

El DIV contenedor contiene un bullet y texto. No me importa tanto su contenido, sino que al poner en ese div CONTENEDOR dos divs con contenido cada uno, al ponerle FLOAT left al que va en la izquierda y right al de la derecha, el div CONTENEDOR no los contiene. No sé si fui claro...

Por otro lado, Inyaka, cómo que no mezcle CSS con HTML? si te referís a lo que dejé en el código fue por ejemplo, cada propiedad del div la trae de un archivo CSS.

Abrazos y gracias de nuevo!

a ver con esto...



saqué el clear:both que no servia y lo reemplacé por overflow:hidden y anda perfectamente.

harggg dale con overflow:hidden ¡¡¡


si crece el contenido dentro de un contenedor al cual le dices que lo que se desborde lo esconda obviamente se va a esconder, la solución pasa por no usar ese overflow en este caso

si se te deslinean cosas lo que puedes hacer es usar margenes negativos por ejemplo, por eso digo ¡no uses overflow hidden en este caso!

me parece que estas mas que equivocado....probalo y decime si te corta el overflow:hidden los contenidos..... Por otro lado me parece una tonteria usar un div contenedor, un div para el bullet y otro para el texto!

Chicos no se peeeeguen... =P

Dragon-X, puede ser una tontería, por eso lo resolví poniendo todo dentro de contenedor y el bullet como fondo y padding para acomodar el texto en línea con el bullet.

El problema no pasa por si es una tontería o no. El asunto es que lo que está fallando, y me parece absurdo, es que genero un div CONTENEDOR y en él pongo dos divs que contienen cada uno una información sea cual sea esa info, el div CONTENEDOR no está conteniendolos, y desde hace unos años que vengo usando DIVs no me pasaba esto.

Quien más puede responderme algo?
Abrazos y gracias por su participación!

PD. Antes no lo usaba, pero probé ahora el OVERFLOW:HIDDEN y funcionó... gracias dragon-x
PD2. Inyaka, lo que vos decís que la solución pase por poner valores negativos a los márgenes? el contenido de CONTENEDOR no se me corta, simplemente que CONTENEDOR no está conteniendo y me resuelve el valor de border (de CONTENEDOR) por encima del contenido, cuando este está dentro.

hagamos algo más frácil para todos, porque no subis tu HTML/CSS y nos pasas la URL, de este modo podemos ver bien que es lo que pasa y porque.

p.d. el overflow:hidden NO corta los contenidos como leí por ahí arriba, todo lo contrario este creece según lo necesite.

DragonX ¿sabes en verdad lo que estas diciendo? http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/#efectosVisuales

boratlon de todo lo que ha dicho el colega yo y la W3C concordamos en que es mejor que nos des el link para analizar mejor el problema

tal cual....pasanos el link! y lo del overflow:hidden; lo voy a ver detenidamente....