Hola gente estoy intentado dejar las tablas definitivamente y hacer mis pinitos maquetando webs con css. Estaba muy contento creando mi estructura porque se veía muy bien y con poco código pero mi sorpresa fué cuando quise ver la web con explorer ¡¡santo dios que es esto¡¡, jaja se veía fatal (por no decir algo más apropiado). No tengo ni idea porque pero se veía fatal. Se que por ejemplo las capas que son position:fixed con explorer parece que no funcionan , pero solo he usado relative y absolute y mi resultado ha sido nefasto (ademas de float:left y right).
Voy a dejar el códiigo haber si alguien es tan amable solamente de decirme porque explorer no la muestra correctamente, tengo que decir que he usado explorer 6 ya que uso linux y creo que no puedo emular el 7 todavía. Si ademas alguien me diejera como poder obtener el mismo resultado pero que se pueda ver en explorer entonces ya sería la leche.
Un saludo y mil gracias de antemano
Código:
<style type="text/css">
.header_menu{position:relative; border:#FF6600 solid 2px; margin :auto;}
.container {width:100%; background-color:#000;margin :auto; position:absolute;}
#columnas{position:absolute; border:#FF6600 solid 2px;top:100%;}
#zonas{position:absolute; border:#FF6600 solid 2px;top:100%;float:left}
#col1{position:absolute; border:#FF6600 solid 2px;float:left;left:280px; }
#col2{position:absolute; border:#FF6600 solid 2px;float:left;left:530px ;}
#col3{position:absolute; border:#FF6600 solid 2px;float:left;left:780px ;}
#zonas div{width:160px; height:220px }
#col1 div,#col2 div, #col3 div {width:160px; height:220px }
</style>
</head>
<body >
<div class='header_menu' align='center'>
aquí va el menú
<div class='header_bg' style="background-color:#fff" align='center'>botoner header
sdfdsf sdfsf gdfgd fgdfg dfg sdfgs gdhdfghgfjgfhjgfj djthjktfkyly
</div>
<div class='container' >
<!-- todo el contenido de la pag va aquí dentro -->
<!-- menu principal de la cabecera -->
aquí va el menú de el header
</div>
<div id='columnas' >
<div id='zonas'>
<div>zonas 1</div>
</div>
<div id='col1'>
<div>casilla 1</div>
<div>casilla 2</div>
<div>casilla 3</div>
</div>
<div id='col2'>
<div>casilla 1</div>
<div>casilla 2</div>
<div>casilla 3</div>
</div>
<div id='col3'>
<div>casilla 1</div>
<div>casilla 2</div>
<div>casilla 3</div>
</div>
</div>
<!-- fin de columnas zonas y clasificados -->
<div class='pie'>
pié de página
</div>
</div>
<!-- fin de contaniner -->
</body>
</html>