Probléme DIV au dessus de 2 autres div

Sami ZERRAI
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Je voudrais développer mon portfolio.

Je voudrais que la Div orange et la div bleu sois cote a cote. Et qu'une div Blanche ronde sois au millieu des deux div.

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/style.css" />
        <title>test</title>
    </head>
        <body>
            <!-- HEADER -->
            <header class="header">
                <div class="orange">
                </div>
                <div class="bleu">
                </div>
                <div class="white">
                </div>
            </header>

            <!-- CONTAINER -->
        </body>
</html>

CSS 

html, body{
    background-color: #F6F6F6;
    font-family: 'Avantgarde', sans-serif;
    font-size: 16px;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* HEADER */
.header{
    width: 100%;
    background-color: red;
}

.orange{
    position: absolute;
    z-index: 1;
    float:left;
    background-color: #f39c12; 
    width: 50%;
    height: 30%;
}

.bleu{
    position: absolute;
    z-index: 1;
    background-color: #3498db;
    float:right;
    width: 50%;
    height: 30%;
}

.white{
    position: absolute;
    z-index: 2;
    background-color: white;
    -moz-border-radius: 50%;
    -webkit-border-radius: 390px;
    border-radius: 390px;
}

Merci de vos réponce et de l'aide.

4 réponses

Balsakup

Voilà pour toi, dis moi si ça te va. Sinon je peux le faire d'une autre manière.
http://codepen.io/Balsakup/pen/JbWNGJ

Sami ZERRAI
Auteur

Merci de ta réponce rapide.
Pourrais tu refaire la même chose d'un autre maniére, car je n'utilise pas le Jade/SASS et je ne sais pas l'utiliser.
Merci

Balsakup

Tu as juste à cliquer sur le chevron déscendant et cliquer sur "view compiled" et ça affichera la version html et css

Sami ZERRAI
Auteur

C'est Parfait merci de ton aide.