Comment est-ce que je pousse un flottant droit, si son HTML est après le contenu?

J'ai un la plupart du temps fixe, 2 colonnes, mise en page:

  • 1ère colonne qui prend autant de place qu'il doit
  • et la 2ème colonne a une largeur fixe et introduction au droit

Je veux en faire un responsive design, donc dans les petites tailles d'écran, la 2ème colonne se termine au-dessous de la 1ère colonne. Cela signifie que le code HTML pour la 2ème colonne après la colonne 1.

Mon problème est que je ne peux pas semblent flotter la colonne de droite correctement lors de l'utilisation de cette marque. Il finit par flottait, mais est en dessous du contenu principal.

Voici un exemple de code:

HTML:

<div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>

CSS:

.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    float: right;
    width: 120px;
    background-color: lightgreen;
}

JS fiddle ici: http://jsfiddle.net/zinkkrysty/U3fA8/

J'ai essayé aussi en utilisant des marges négatives, mais ne semble pas possible de le faire.

Si vous avez d'autres approches à mon problème (à l'exception de réglage de la largeur sur la première colonne), merci de lui donner un aller

source d'informationauteur Cristian