[SOLUCIONADO] Div traidor se visualiza bien en Firefox y no en Chrome

[Hachector]

¡Buenas a todos!

Como digo en el título, tengo un div que me está haciendo la puñeta, porque en Firefox se muestra en su sitio, pero en Chrome no (de IE paso un poco).

La cosa es: Un div grande y hermoso, centrado en la pantalla, que contiene dos divs mas pequeños, y quiero que uno se quede a la derecha, y otro a la izquierda, ambos pegando a la parte superior del div principal, y les tengo puesto el siguiente codigo CSS, donde #principal es el div grande, y #cuadradete 1 y 2 son los divs que tienen que estar a la izquierda y a la derecha respectivamente:

Código CSS:

#principal{
        width: 80%;
        background-color:yellow;
        position:relative;
        margin: 0 auto;
        left: 0;
        right: 0;
        border: 3px solid blue;
        opacity:0.70;
            
        z-index: 0;
    }
 
    #cuadradete{
        width: 100px;
        height: 100px;
        background-color:transparent;
        position:absolute;
        left:0;
        top:0;
            
        z-index: 1;
    }
 
    #cuadradete2{
        width: 100px;
        height: 100px;
        background-color:transparent;
        position:absolute;
        right:0;
        top:0;
            
        z-index: 1;
    }
 

Código HTML:

<div id="principal">
 
        [Otros contenidos varios...]
 
        <div id="cuadradete"></div>
        
        <div id="cuadradete2"></div>
    </div>
 

[Sarlit]

Prueba a flotarlos a izquierda y derecha respectivamente

float:left;
float: right;

[andresgarciadev]

pues los probe y no veo ninguna diferencia en google o chrome, creo que debes tener otro stilo en la pagina que los esta afectando por que con lo que nos muestras no deberia haber problema
http://jsfiddle.net/q1102yzz/

[mbm150]

Hola

Código CSS:

#principal{
    width: 80%;
    background-color:yellow;
    position:relative;
    margin: 0 auto;
    border: 3px solid blue;
    opacity:0.70;
    overflow: hidden;
}
#cuadradete{
    width: 100px;
    height: 100px;
    background-color:red;
    position:relative;
    display:block;
    float:left;
}    
#cuadradete2{
    width: 100px;
    height: 100px;
    background-color:blue;
    position:relative;
    display:block;
    float: right;
    z-index: 1;
}
 

Prueba así.

Saludos.

[Hachector]

Efectivamente, en realidad el CSS estaba bien... El problema viene desde un javascript que tengo puesto para que se muevan por la pantalla, que por algún extraño motivo, los esquina a los dos juntos arriba a la derecha en chrome (no en firefox, vaya usted a saber por qué)

De todas formas, eso ya lo ire investigando

Muchas gracias a todos, y feliz año ;)