flotteur div côté div

Question

http://dev.dealercontrol.net/dealercontrol/index_comp1.html

sur cette page je suis en train de flotter un drapeau à la gauche du sous-titre

<div> 
       <div class="flag certified">Certified</div> 
       <div class="subtitle left">Deal On 09 Black Lamborghini LP560</div> 
      </div> 

Je ne peux pas sembler obtenir le drapeau de mise en page correctement ce qui être la meilleure méthode pour le faire? comment puis-je définir la hauteur du drapeau pour envelopper le texte à l'intérieur de celui-ci?

Answer 1

Mettre le drapeau à l'intérieur du div et le flotteur à la gauche

<div> 
    <div class="subtitle left"> 
    <div class="flag certified" style="float: right">Certified</div> 
    Deal On 09 Black Lamborghini LP560 
    </div> 
</div> 

Answer 2

homme bon seigneur.

Vous avez soooooo beaucoup de CSS se passe sur cette page il n'est pas étonnant que vous vous fassiez des nœuds. Regardez simplement l'énorme pile de styles hérités et surchargés sur n'importe quel élément avec firebug.

Tout d'abord simple float:leftva faire l'affaire, mais il ne fonctionnera que si les deux éléments ont un conteneur largeur combinée plus étroite que leur mère - sinon ce qui peut se passer autre chose, mais il enveloppe? Deuxièmement, votre code ci-dessus n'est pas réellement ce qui est sur la page. Trop de conteneurs divs gênent - simplifient et déplacent les deux éléments requis en tant que nœuds frères du même parent et donnent les deux float:left.

Troisièmement, réduisez votre ballonnement! Les classes .clear sont des ballonnements purs (voir here). Vous n'avez vraiment pas besoin de plus de 2 fichiers CSS (une base globale et une extension de page) pour condenser et fusionner vos fichiers. Découpez autant de styles de sélecteur d'étiquettes que possible (c'est ce qui crée toutes les piles héritées/ignorées qui vous amènent dans une position difficile à déchiffrer). Heureusement, à ce stade, vous avez un design fonctionnel et une page plus légère et plus réactive que vous pouvez déboguer plus facilement à l'avenir.