2 colonne Div flottant droite et gauche enfant divs parent extérieur

Je ne peux pas trouver une bonne solution à ce problème. J'ai 2 divs à l'intérieur d'un div parente. Lorsque j'essaie de faire flotter les divs à droite et à gauche pour faire 2 colonnes à l'intérieur de la div parente, les divs enfants finissent sous le div parent.2 colonne Div flottant droite et gauche enfant divs parent extérieur

<head> 
    <link rel="stylesheet" type="text/css" href="float.css" /> 
</head>  

<body class="wrapper"> 
    <div class= "whole"> 
     <div class="left"> 
      <p> Hello </p> 
     </div> 
     <div class="right"> 
      <p> Hello Again</p> 
     </div> 
    </div> 
</body>

CSS est

.whole { 
    padding: 30px 30px 15px 30px; 
    background-color: yellow; 
    margin-bottom: 30px; 
} 
.left { 
    width:50%; 
    position:relative; 
    float: left; 
    background-color:green; 
} 
.right { 
    width:50%; 
    position:relative; 
    float: right; 
    background-color:red; 
}

Pourquoi le contenu de l'enfant divs "droite, à gauche" être en dessous de la div parent "de tout" ??

Source

2010-08-31 Peter

Essayez d'ajouter ces propriétés à par exemple parent whole:

position:relative; 
overflow:auto;

Ce css divs enfant:

position:absolute: 
top: xxx; 
left: xxx;

Notez que vous devez utiliser id au lieu de classe pour un élément qui est censé être seulement un dans le document.

Source

2010-08-31 20:50:38 Sarfraz

dépassement: auto; a bien fonctionné. Je n'ai pas eu à changer les enfants divs ou la position du parent. – Peter

Je préfère overflow: caché, car overflow: auto peut afficher des barres de défilement sur le div, si le contenu est plus grand que lui. –

C'est simple. Float fait en sorte que les éléments "flottent" hors du contenu normal de la page, ce qui explique pourquoi il est passé sous la div de votre conteneur. Au lieu d'utiliser les divs comme éléments enfants, essayez d'utiliser un span qui est à peu près la même chose, mais qui s'assoiront heureusement l'un à côté de l'autre.

Source

2010-08-31 20:49:49

Ce problème est souvent appelé suppression des flottants. Cette page a quelques solutions http://www.positioniseverything.net/easyclearing.html avec un lien vers des informations plus récentes. "Quand un flotteur est contenu dans une boîte de conteneur qui a une bordure ou un arrière-plan visible, ce flotteur ne force pas automatiquement le bord inférieur du conteneur lorsque le flotteur est rendu plus grand, mais le flotteur est ignoré par le conteneur. le fond du récipient comme un drapeau. "

Source

2010-08-31 20:58:12 joelt

Effacement avec débordement: auto; ou l'utilisation du clearfix: après tour sur le div parent devrait être suffisant. Je ne donnerais pas un positionnement absolu aux enfants car cela empêcherait les éléments sous l'enveloppe de couler naturellement avec la page.

Source

2010-08-31 21:04:45 staticvoid

2 colonne Div flottant droite et gauche enfant divs parent extérieur

Répondre

Questions connexes