Différentes couleur d'arrière-plan pour la gauche et la moitié droite de la div

J'ai un div centré mise en page. Le côté gauche de la div dans le fond doit être blanc et le côté droit doit être vert. Les deux devraient s'étendre à l'infini.

Je pense qu'il devrait être assez simple mais je n'ai tout simplement pas l'obtenir maintenant. Toute solution de facilité?
Merci!!!!

-----------------------------------------------------
(div 1)     __________________________ 
           |(div 2)         |         |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|

------------------------------------------------------
Vous pouvez obtenir quelques idées supplémentaires si vous le demandez sur doctype.com

OriginalL'auteur Christoph | 2009-08-14

  1. 6

    Ajouter une image de fond avec les deux couleurs à l'extérieur de la div et de permettre au navigateur de l'échelle (au lieu de carrelage).

    Chaque couleur doit remplir exactement 50% de la largeur de l'image pour vous assurer que les couleurs ne seront jamais de fuite sur chaque côté.

    Peut-être même la position de l'image absolument derrière l'intérieure de la div.

    Pour des idées sur la façon d'étirer l'image, reportez-vous à cette question: Fond de CSS Répéter

    Merci, fonctionne assez cool! Ne savais même pas que vous pouvez étirer bg-images.

    OriginalL'auteur Aaron Digulla

  2. 9

    Utiliser le ::after et ::before pseudo-éléments. De cette façon, vous pouvez même obtenir les trois couleurs et faire le drapeau italien!

    div {
    height:300px;
    width:100%;
    outline:thin solid black;
    position:relative;
    background:white;
}
div::after, div::before {
    height:300px;
    content:' ';
    position: absolute;
    top: 0;
    width: 33%;
}
div::after {
    right: 0;
    background-color: red;
}
div::before {
    left: 0;
    background-color: green;
}

    Ici un violon: http://jsfiddle.net/g8p9pn1v/

    Et de ses résultats: Différentes couleur d'arrière-plan pour la gauche et la moitié droite de la div

    OriginalL'auteur Shaun Luttin

  3. 1

    Vous pourriez avoir deux divs sur l'extérieur, et ensuite avoir l'un de tes divs dans chaque. Aligner à droite et à gauche aligner respectivement. Comme:

    -----------------------------------------------------
(div)                       | (div)
           _________________|_________ 
           |(div)           |  (div)  |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|
                            |
------------------------------------------------------
    Mais cela ne fonctionne que si la ligne entre les deux à l'extérieur divs est exactement à 50% de l'écran (ce qui n'est pas dans ma mise en page)?

    OriginalL'auteur James Wiseman

  4. 1

    Comment créer deux divs bg-gauche et bg-droit, avec une position absolue à l'intérieur d'une totalité de la largeur du conteneur. Depuis qu'ils sont en position absolue, vous pouvez ensuite le contenu d'un calque au-dessus d'eux. Ainsi, par exemple, en utilisant bootstrap balisage:

    <div class="fullwidth">
    <div class="bg-left"></div>
    <div class="bg-right"></div>    

    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                Insert left side content here...
            </div>
            <div class="col-xs-6">
                Insert right side content here...
            </div>
        </div>
    </div>
</div>

    Alors votre css:

    .fullwidth {
    position: relative;
    width: 100%;
 }
.bg-left {
    background: #000; 
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 50%;
}
.bg-right {
    right: 0;
    top: 0;
    bottom: 0;
    background: #ddd; 
    position: absolute;
    width: 50%;
}

    OriginalL'auteur joncjordan

  5. 0

    Je l'avais mis à l'intérieur du div deux autres divs et de leur donner la taille et le backgound couleurs

    L'centrée div2 est déjà à l'intérieur que les autres div1. Il est centré en utilisant margin:auto. Je ne pense pas que je peux mettre deux autres divs à l'intérieur?
    bien sûr vous pouvez. vous aurez besoin d'ajouter les deux divs ou de traiter avec une répétition de l'image de fond qui fait le changement de couleur pour vous.

    OriginalL'auteur Federico klez Culloca

  6. 0

    Vous pouvez utiliser Gradient. C'est un site où vous pouvez obtenir la croix-navigateur de code de ce que vous avez besoin.

    http://colorzilla.com/gradient-editor/

    Il peut être un peu déroutant à utiliser au début mais je le trouve un très puissant outil.

    Ce qui concerne les!

    OriginalL'auteur eyyo