Marge minimale dans une mise en page liquide

Question

Comment empêcher le contenu de sauter en dessous de la barre latérale lorsque la marge min est atteinte?

http://jsfiddle.net/7SAHm/4/

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="content"></div> 
</div> 

#wrapper { 
    width: 100%; 
    overflow:hidden; 
} 
#sidebar { 
    float:left; 
    width: 20%; 
    min-width:50px; 
    background-color:#ffb8e0; 
} 
#content { 
    float:left; 
    width:80%; 
    background-color:#fff7b8; 
} 

Essayez de redimensionner la fenêtre du navigateur et de voir que le contenu saute vers le bas, plutôt que je veux rester à côté de l'autre, même si 80% + 50px> largeur d'emballage, instad il se doit le débordement ne saute pas vers le bas.

Merci d'avance!

Answer 1

Vous devez utiliser une requête multimédia dans votre CSS pour changer le percentage-

J'ai modifié votre code pour vous montrer une démo http://jsfiddle.net/kevinPHPkevin/7SAHm/5/

@media screen and (max-width: 400px) { 
    #sidebar { 
     width: 50%; 
    } 
    #content { 
     width:50%;  
    } 
}