CSS: float:left avec un margin-right ne pas pousser tous les éléments de loin

J'aimerais tout mon contenu à l'écoulement autour d'une image. Pour ce faire, j'ai simplement fait

img#me {
    width: 300px;
    float: left;
    margin-right: 30px;
}

Cela fonctionne pour le texte wraping, mais d'autres éléments derrière elle. Par exemple

<style>
h2 {
   background: black;
   color: white;
}
</style>
<img id="me" src="http://paultarjan.com/paul.jpg" />
<h2>Things!</h2>

Puis le h2 fond coule la droite passé la 30px de la marge. Comment dois-je faire à la place?

InformationsquelleAutor Paul Tarjan | 2010-03-28
  1. 6

    Je souhaite que je pourrais expliquer exactement pourquoi, mais

    h2 {
   ...
   overflow: hidden;
   ...
}

    devrait résoudre votre problème.

    InformationsquelleAutor Les
  2. 0

    Je ne suis pas sûr de comprendre le problème, mais je suis sûr que ça vient de l' h2 être un block élément. Si cela fonctionne pour vous, le meilleur remède serait faire display: inline. Sinon, donner la h2 une largeur spécifique, et un float: left, en tant que bien.

    • Si je les fais à la volée, alors qu'ils ne s'étendent pas à tous le chemin vers la droite. Je veux juste le code HTML pour le faire comme il le ferait normalement, sauf à avoir un 330px zone vide à gauche
    • Je vois! Hum, c'est difficile, vu que ce doit être dynamique, à droite? Il ne doit se comporter de cette façon si c'est à côté de votre image, mais pas si elle est en dessous, c'est exact?
    • Exactement. Si il est sous l'image, je veux qu'il ait la pleine largeur. Je ne pensais pas que ça à être dur! 😉
    • faites-nous savoir si Les " réponse le trie! Je suis curieux de savoir le résultat.
    • Yup, le dépassement de capacité fixe! Qui sonne comme il devrait être le comportement par défaut, mais le CSS est une drôle de bête. paultarjan.com
    InformationsquelleAutor Pekka 웃