Les cuento, diseñando (Y aprendiendo a la vez) con CSS, me encontre con un pequeño problema que no se como sortearlo...
Lo que quiero hacer es un diseño a 2 columnas, pero no logro que FF e IE me muestren lo mismo...
Les muestro un pedacito de mi codigo:
La distribucion de los divs seria algo asi:
Código :
<div id="contenedor"> <div id="cuerpo"> <div id="cuerpo_l"> </div> <div id="cuerpo_r"> </div> </div> <div id="footer"> </div> </div>
Y el CSS asi:
Código :
#contenedor{
width: 750px;
height: auto;
background-color: #99CCDD;
border-style: none;
margin: 5px auto;
}
#cuerpo{
width: 700px;
height: auto;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 15px;
float: none;
}
#cuerpo_l{
width: 175px;
height: auto;
background-color: #F0FEFF;
border-left: 10px solid #6699FF;
border-right: 7px solid #6699FF;
padding: 2px 2px 8px 5px;
margin-right: 2px;
float: left;
}
#cuerpo_r{
width: 485px;
height: auto;
padding: 2px 2px 8px 5px;
margin-left: 2px;
background-color: #F0FEFF;
float: right;
}
#footer{
width: 670px;
height: 20px;
background-color: #F0FEFF;
font-family: Verdana;
font-size: 11px;
border-left: 15px solid #99CC00;
border-right: 15px solid #99CC00;
margin: 10px 25px 0 25px;
padding-left: 2px;
}
El tema es... el "float: left;" que le doy a "cuerpo_l", en FF hace que "cuerpo_r" quede pegado al margen izquierdo de "contenedor", pero en IE, "cuerpo_r" queda pegado al margen derecho de "cuerpo_l"... que estoy haciendo mal?
Grax!
Pablo
yo no sé si esta bien lo que hago, pero es lo que hago... acá se me corregirá, supongo...