Flotteur du bloc CSS à gauche

changement width de la body à 408px; puis float:right; la div 3 & 4.

demo: http://jsbin.com/imire5

mise à Jour de la démo avec le flotteur gauche seulement : http://jsbin.com/imire5/2

tout d'abord, vous ne devriez pas avoir plusieurs articles avec le même id . C'est à ça que sert class . id doit être unique dans la page.

la solution est à votre problème est de faire flotter les deux grands blocs au right et tout le reste au left .

cela ne fonctionnera bien sûr que si les boîtes sont dans un conteneur (c'est-à-dire le corps) qui est juste la bonne largeur pour tous les quatre, sinon vous aurez juste finissez avec un trou au milieu de votre mise en page.

le problème est que parce que vous avez le même ID pour tout, vous ne pouvez pas facilement spécifier ceux qui flottent à droite et ceux qui flottent à gauche.

Il y a des façons de le faire, mais la bonne solution serait d'utiliser des classes.

<div class="con" style="width:100px;height:200px;">
    1
</div>
<div class="con" style="width:100px;height:200px;">
    2
</div>
<div class="con tall" style="width:100px;height:400px;">
    3
</div>
<div class="con tall" style="width:100px;height:400px;">
    4
</div>
<div class="con" style="width:100px;height:100px;">
    5
</div>
<div class="con" style="width:100px;height:100px;">
    6
</div>
<div class="con" style="width:100px;height:100px;">
    7
</div>
<div class="con" style="width:100px;height:100px;">
    8
</div>


<style>
body {
  width:408px;
  height:440px;
}
.con {
  float:left;
  background:#bebebe;
  margin:1px;
}
.tall {
  float:right;
}

</style>

si vous absolument ne peut pas (ou ne veut pas) changer le code HTML, Il ya encore une autre solution I pourrait suggérer - le sélecteur CSS [attr] vous permettra de spécifier un style CSS différent pour les éléments qui ont des attributs particuliers. Dans ce cas, vous pourriez l'utiliser pour ramasser les grands blocs et les faire flotter à droite.

#con[style~='height:400px;'] {float:right;}

cela n'affectera que les éléments qui ont id="con" et où l'attribut style inclut height:400px; .

veuillez noter que le sélecteur [attr] ne fonctionne pas sur les version de IE, donc vous pouvez avoir besoin d'excersise caution si vous décidez de l'utiliser.

cette solution implique également de faire flotter certains éléments à droite, contre lesquels vous semblez être bien décidé, mais c'est toujours la seule solution viable CSS-only.

Le problème que vous avez est que CSS float fonctionne d'une manière qui est différente de la façon dont vous voulez qu'il fonctionne.

une Autre réponse à votre problème pourrait être d'utiliser Javascript pour le pirater.

Il ya un jQuery plug-in appelé maçonnerie qui semble faire ce que vous êtes après. Vous pouvez utiliser float:left; pour tout, puis utiliser la maçonnerie pour fermer les trous.

cela signifierait Compter sur une solution qui n'est pas entièrement basée sur CSS, ce qui n'est probablement pas idéal-d'autant plus que je vous ai déjà donné une solution de CSS - seulement de travail.

(aussi une fois que vous commencez à utiliser Javascript, vous certainement besoin de corriger votre id vs class problème -- Javascript vous désavouera si vous avez tous ces éléments avec le même id )