Disposition de 2 colonnes (Largeur fixe de la colonne de gauche, fluide de droite + clair: les deux)

Juste besoin d'aide car j'ai essayé de trier ce depuis des siècles maintenant. Ce dont j'ai besoin:

J'ai un 2 mise en page en colonnes, où la gauche de la colonne a une largeur fixe 220px et la colonne de droite a un liquide de largeur.

Code est:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; float: left; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
    </div>
</body>
</html>

Il n'y a pas de problème. Lorsque j'utilise une syntaxe css clear: both dans la colonne de droite, tout le contenu après est déplacé sous la colonne de gauche. C'est un comportement approprié et rien contre elle.

Mais je relly besoin d'utiliser clear: both dans le chemin, qu'il reste juste dans le contexte de la colonne de droite (ne pas être affecté par la colonne de gauche, et ne bouge pas en dessous)

Est-il simple à obtenir autour de avec la en conservant une base float concept de conception de page?

Mise à JOUR: Veuillez consulter ce lien pour savoir de quoi je suis sur que ça peut être un peu déroutant de ma description.
Lien: http://jsfiddle.net/k4L5K/1/

source d'informationauteur Ondrej