CSS DIv Conteneur de Hauteur. DIV flottante questions

Peut vous forcer un DIV conteneur hauteur à accueillir deux div flottant enfants? Est-il une fantaisie de truc que je peux utiliser pour faire cela? Je suis en train de faire deux de taille égale, les divisions à l'intérieur de la div parent. Je voudrais qu'elles s'affichent côte à côte avec un peu d'espace entre eux. Enfant2 tend à sortir pour aller en dessous de Enfant1. Note Enfant2 contient un tableau. Dois-je être flottant?

HTML:

<div id="parent">
  <div id="child1"></div>
  <div id="child2">
    <table><tr><td>content</td></tr></table>
</div>
</div>

CSS:

div#parent
{
    background-color: #C6E4E0;
    border: solid 3px #017E6F;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    width:99%;
}

div#parent div
{
    width:49%;
    float:right;  
    padding:3px;  
}

div#parent div:first-child
{
    float:left;
}

OriginalL'auteur Hcabnettek | 2009-08-18

  1. 7

    Ce n'est pas un clearfix question les gars, son problème, c'est que ses deux divs flottants n'apparaissent pas à côté.

    Tout d'abord, vous n'avez pas besoin de définir la largeur de la div parent, les divs sont les éléments de bloc qui signifie qu'ils s'adaptent automatiquement leur largeur de prendre toute la largeur de leurs parents (dans ce cas, sans doute la mère de div#parent est le corps).

    Parce que vous êtes le réglage de la largeur explicitement ET en lui donnant de rembourrage, il peut éventuellement s'étendre au-DELÀ du corps. Qui n'a pas vraiment d'importance, mais si vous appliquer cette connaissance même de l'enfant flottait divs et vous pouvez voir pourquoi la droite on peut obtenir heurté vers le bas.

    Tout d'abord, si vous êtes à la définition explicite de la largeur des divs à un pourcentage, vous n'avez pas besoin d'ajouter du rembourrage. Parce que vous avez affaire avec un pourcentage de largeur, il est préférable d'ajouter un rembourrage pour le contenu de la balise div plutôt que les divs eux-mêmes, parce que le rembourrage est AJOUTÉE à la largeur. Par conséquent, si vous avez ajouté 10px rembourrage pour un div qui avait de 49% de la largeur de 100px de ses parents, il aurait une largeur de 49px + 10px + 10px (2 côtés) pour un total de largeur calculée de 69px.

    Puisque vous n'avez pas de poste de votre balisage et le contenu ou le navigateur de test, je ne peux pas dire exactement pourquoi la div est tombé vers le bas. Il y a deux possibilités probables.

    1. Vous utilisez IE, ce qui permet de tables de prolonger au-delà de son parent div qui va provoquer la rupture. Essayez de définir explicitement la largeur de la table à un pourcentage de son parent ou quelque chose comme ça.
    2. 49% width + padding = plus grand que [parent-largeur] - [gauche-div-largeur]. Cela va faire pour obtenir heurté vers le bas parce que la gauche de la div de droite et de div sont trop larges pour le parent largeur.

    OriginalL'auteur kmiyashiro

  2. 3

    - Je utiliser le clearfix classe.

    .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/

.clearfix {
    display: block;
}

/* End hide from IE-mac */

    puis il suffit d'utiliser la classe dans chaque flotté-élément conteneur.

    OriginalL'auteur

  3. 1
    #container { width:200px; }
.floated   { width:100px; float:left; }
.clear     { clear:both; }

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
  <div class="clear"></div>
</div>
    ce n'est pas un clair/layout problème, son problème, c'est que les chars n'apparaissent côte à côte.

    OriginalL'auteur Sampson

  4. 1

    Je ne suis pas un fan de clear: both;, je préfère le faire dans Jonathan Sampsons exemple:

    #container { width:200px; overflow: hidden; }
.floated   { width:100px; float:left; }

     

    <div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
</div>
    Ce n'est pas une compensation/layout problème, c'est un flotteur de problème.
    En fait ce qui a fonctionné pour moi. Éviter d'autres "clear:both" div, le parent qui a obtenu le droit de hauteur, y compris rembourrage.

    OriginalL'auteur janhartmann

  5. 1

    Par le chemin, vous voulez

    div#parent > div { float:left; }

    au lieu de

    div#parent div:first-child { float:left; }

    qui n'est pas encore IE6 sympathique, mais il va flotter à la fois pour l'enfant DIVs.

    En fait non, il veut faire flotter le premier div à droite et la deuxième div à gauche, donc tout d'abord l'enfant est correcte.
    bien sûr, il ne fonctionne pas sous IE...
    Ah oui je vois que maintenant, merci.

    OriginalL'auteur Eric Wendelin