Centrar contenido entre barras laterales en HTML y solucionar problemas de compatibilidad

shadowhck · 11 Sep 2011

hola, necesito hacer lo siguiente: colocar un contenido en el centro de 2 barras laterales, pero en lugar de que en el codigo aparesca por ejemplo: <div id="izq"></div><div id="contenido"></div><div id="der"></div> quiero que primero aparesca el DIV del contenido.

HTML:

<style type="text/css">
#contenido {
width: 450px;
height: 300px;
background: #000;
float: none;
display: inline-block;
}
#izq {
width: 200px;
height: 300px;
background: #00ff00;
float: left;
clear: left;
display: inline-block;
}
#der {
width: 200px;
height: 300px;
background: #0000ff;
float: right;
clear: right;
display: inline-block;
}
</style>

Con este codigo funciona en Firefox 6, pero en Google Chrome no funciona y en Internet Explorer 6 tampoco funciona.
Hay alguna alternativa?

Science · 11 Sep 2011

Bueno, dentro del DIV del contenido puedes crear nuevos DIVs.

Yo creo que usaría:

PHP:

<div id="contenido">

<div class="izq">Contenido</div>
<div class="der">Contenido</div>

</div>

Pondría todos los float como "left". El código lee de arriba a abajo y lo va ubicando a la izquierda, pero cuando ya hay uno el otro lo pone a continuación. No sé que tan necesario es el "display: inline-block;". Y tengo la duda de si los DIV de dentro pueden tener la misma altura que el de fuera, puesto que los DIV son bloques y generan un salto de línea.

PHP:

#contenido {
width: 450px;
height: 300px;
background: #000;
float: [B]left[/B];
}
.izq {
width: 200px;
height: 300px;
background: #00ff00;
float: left;
clear: left;
display: inline-block;
}
.der {
width: 200px;
height: 300px;
background: #0000ff;
float: [B]left[/B];
clear: right;
display: inline-block;
}

A ver si funciona.

shadowhck · 11 Sep 2011

bueno, gracias Science, pero ya encontre una solucion, utilize position: absolute; y les di margen, y a la vez los encerre en un recuadro medido.

Centrar contenido entre barras laterales en HTML y solucionar problemas de compatibilidad

shadowhck

Science

shadowhck

Temas similares