CSS: Parent-Div ne se développe pas avec ses enfants (à l'horizontale)

Je voudrais que le parent-div (rouge) pour la croissance avec le vert de l'enfant-div.
Maintenant, il s'arrête à la fenêtre d'affichage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
 * {
  font-family: verdana;
  margin: 0px;
  padding: 0px;
 }
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
 <div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>

Je ne veux pas utiliser display:table; car il ne fonctionne pas dans IE.

Des idées?

Pourquoi ne pas faire la div parent 2000 pixels? Cela devrait fonctionner.
De toute évidence, il veut que le parent largeur dépend de l'enfant de la largeur (qui peut varier en fonction du contenu)
C'est vrai 🙂

OriginalL'auteur vyden_st | 2010-03-30

  1. 27

    Utilisation display: inline-block; sur le parent <div> et il fonctionnera comme prévu

    Ouais! C'est génial! Merci, je n'ai jamais pensé que ce serait travailler dans IE trop viens d'apprendre quelque chose d'utile!
    Quirksmode (quirksmode.org/css/display.html) vous dit que vous ne pouvez pas utiliser la inline-block affichage sur des éléments qui ne sont pas par défaut à display: inline pour IE 6 et 7. Avez-vous testé?
    Vrai, mais c'est l'avant-gardistes solution conforme à la norme. À l'adresse des navigateurs plus anciens, les commentaires conditionnels peuvent être utilisés pour appliquer une float à l'élément parent (si nécessaire).
    Je l'ai résolu en changeant la div pour une durée de und donner le parent display:inline-block; de Cette façon, IE 6 - 8 et FF affiche le site correct. Je viens de tester si cela fonctionne dans FF2 trop.. Mais de toute façon, merci!
    Err.. apparemment, nous avons besoin de la div (pas de inline-élément). Est-il un moyen sans les commentaires conditionnels? Pur CSS? Serait génial 🙂

    OriginalL'auteur Josh Stodola

  2. 3

    Faire le parent div float:left; et il sera étendu à volonté.

    Dans FF2 cela ne fonctionnera pas correctement - l'enfant devient plus grand que le parent.. comment pourrions-nous résoudre ce problème? Apparemment, c'est en raison de la marge de la société mère-div.
    Vous aurez besoin d'un élément clair ou vous pouvez utiliser le quirksmode solution affichée ci-dessous.

    OriginalL'auteur Paul

  3. 1

    Je sais je suis en retard, mais voici ce que je fais pour résoudre le problème:

    Ajouter clair à l'INTÉRIEUR de la mère en bas, et de faire le parent overflow: hidden.

    Voici le code modifié:

    .clear{
    clear: both;
    /* make sure there is no height set to it */
    line-height: 0;
    height: 0;
    font-size: 0em;
}

<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
 <div style="background: green; width: 2000px;">dxyf</div>
 <div class="clear">/div>
</div>

    Travaille dans FF3 et IE7, mais pas testé sur d'autres navigateurs.

    Espère, au moins, vous aider avec votre problème.

    OriginalL'auteur Jean-Francois

  4. 0

    Utiliser display:table; sur la div parent. Ou vous pouvez mettre le div parent dans une cellule d'un tableau.

    OriginalL'auteur Bang

  5. 0

    Il y a trop compliqué conseils ici. Voici une astuce: au lieu de bricoler avec des de table-cellules, et claire et flotteurs, assurez-vous que l'enfant a une frontière qui est l'équivalent de l'rembourrage vous avez été à la recherche pour le parent. Les frontières sont toujours attirés à l'extérieur, afin d'en faire ce que vous voulez.

    Cela devrait fonctionner... 

    <div style="margin: 30px; background: red;">
 <div style="background: green; width: 2000px; border: 10px red solid">dxyf</div>
</div>

    ...dans tous les navigateurs, sans problème. HTH.

    OriginalL'auteur PKHunter

  6. -1

    Voir cette solution de quirksmode.org. C'est assez simple, il suffit d'appliquer cette classe pour le conteneur/div parent:

    div.container {
    overflow: hidden;
    width: 100%;
}

    OriginalL'auteur UpTheCreek

  7. -1

    Make parent position relative et de l'enfant à l'Absolu

    OriginalL'auteur Kashif Junaid