Responsive design - 2 la colonne vers le bas à une seule colonne

J'ai 2 divs flottait gauche, de sorte qu'ils apparaissent inline

<div class==".container" style="width: 100%">
    <div class="leftColumn" style="width: 50%; float:left">
        test
    </div>

    <div class="rightColumn" style="width: 50%; float:left">
        test
    </div>
</div>

Lorsque l'écran tombe en dessous de 400px je veux des divs pour apparaître en dessous les uns des autres
Ma requête de média

@media(max-width: 400)
{
    .leftColumn{background-color: Red; float: none}
    .rightColumn{background-color: Blue; float: right} 
}

Merci à tous ceux qui peuvent aider

Quel est votre problème? Pourquoi n'est-ce pas votre solution actuelle ne fonctionne pas. Aussi, vous avez une faute de frappe; class==".container" est pas valide, ce qui peut expliquer pourquoi les choses ne fonctionnent pas. Il devrait être class="container".
Merci mais le problème persiste. Les divs apparaissent toujours dans la ligne.

OriginalL'auteur Wesley Skeen | 2012-06-03

  1. 3

    Vous pouvez avoir le même effet par

    `@media(max-width: 400) {
 .leftColumn, .rightColumn{width:100%;} }`

    OriginalL'auteur maksbd19

  2. 0

    Compris.

    J'avais inline style sur les divs

    <div class="leftColumn" style="width: 50%; float:left">
    test
</div>

    Quand je l'ai enlevé, tout a fonctionné.

    Une autre raison de rester à l'écart de inline style. Pas étonnant, car les styles en ligne recevoir une priorité beaucoup plus importante que les styles CSS.
    Wesley, si cela résout votre question, vous devez choisir votre propre réponse comme correcte.

    OriginalL'auteur Wesley Skeen

  3. 0

    Yep, inline style a été buggering, plus vous n'étiez pas à la définition de vos requêtes de média correctement à 100%, besoin de l'px:

    http://jsfiddle.net/XmqNy/

    OriginalL'auteur Lowkase