Ayuda con 4 DIV en uno

[jmdz]

Vamos por partes si venias maquetando con tablas y ahora queres hacerlo con div's te felicito

Pero usemos la neurona (los dos juntos, digo) lo bueno de maquetar con tablas es que tenes una cuadricula de filas y celdas donde encajas cada cosa, con div's pensalo igual, creamos un div para cada fila y un div para cada celda y hacemos que esas filas no se superpongan aun siendo todas las div's flotantes: clear:both;.

Una vez logradas tus filas luchamos con las celdas, pero acá hay un detalle que nos puede ahorrar algo de código: si tenemos una imagen a la izquierda y un texto a la derecha, con solo hacer la imagen flotante a la izquierda ya esta

Aparte, la versión de IE realmente importa IE6 hace una cosa, IE7 otra distinta e IE8 una tercera variante y aun no sabemos que locas formas tendrá IE9 de interpretar el mismo código. Pero en todo caso, como los IE's hasta ahora no interpretan bien el modelo de caja podemos hacer las cosas bien y luego forzarlas para IE usando el cochino guion antes del nombre de la propiedad, ejemplo: width:260px;-width:160px; IE va a mostrar 160, el resto de los navegadores: 260.

Saludos.

Código probado solo en IE6 y GC4 ( si, en esta PC tengo IE6 y GC4 pero ni FF ni OB ni AS, el mundo esta loco-loco )

Código CSS:

.anun1{
    float: left;
    width: 264px;
    height: 150px;
    background-color:#0d0d0d;
}
.anun1_img{
    border: 0 none;
    float: left;
    width: 100px;
    height: 130px;
}
.anun1_det{
    border: 0 none;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#cccccc;
}
.anun1_city{
    border: 0 none;
    width: 100px;
    height: 16px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    background-image:url(publi/city.gif);
    color:#0d0d0d;
    float: left;
}
.anun1_tip{
    border: 0 none;
    width: 260px;
    -width: 160px;
    height: 16px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    background-image:url(publi/tip.gif);
    color:#0d0d0d;
}
div.fila{
    clear:both;
}
 

Código HTML:

<div class="anun1">
<div class="fila">
<div class="anun1_img"><img src="publi/mini.gif" border="0" /></div>
<div class="anun1_det">esta es una frase comun y sencilla sin nada de extraordinario, solo esta escrita para rellenar el div que lo contiene y punto, bueno y tambien esta para ver la cantidad de caracteres que soporta.</div>
</div>
<div class="fila">
<div class="anun1_city">ciudad</div>
<div class="anun1_tip">01-9806.....</div>
</div>
</div>