CSS taille du contenu div question

Question

J'ai une structure comme celle-

<div id="first"> 
    <div id="second"> 
    <div id="third"> 
     <div id="fourth"> 
     text 
     </div> 
     <div id="fourth"> 
     text2 
     </div> 
    </div> 
    Some other stuff... 
    </div> 
</div 

Voici le css pour elle au moment:

#first { 
width:960; 
} 

#second { 
position:relative; 
} 

#third { 
position:relative; 
top:0; 
right:0; 
} 

#forth { 
position:relative; 
top:0; 
left:0; 
} 

Maintenant, je voudrais des quatrième éléments à rester dans une rangée et à partir du troisième élément de rester sur le côté droit de la deuxième div. Le second div a également une largeur de 960 comme le premier. Quel est le problème avec cela? pourquoi ça ne marche pas?

Answer 1

Edité et devrait fonctionner (non testé):

<div id="first"> 
    <div id="second"> 
    <div id="third"> 
     <div class="fourth"> <!-- changed to class --> 
     text 
     </div> 
     <div class="fourth"> <!-- changed to class --> 
     text2 
     </div> 
    </div> 
    Some other stuff... 
    </div> 
</div> <!-- was missing closing bracket --> 

Et le style:

#first { 
width:960px; /* was missing px */ 
} 

#second { 
position:relative; 
} 

#third { 
float:right /* Makes the element float on the right side. Might want to clear in a later id/class to avoid quirks */ 
position:relative; 
/* Removed redundant top:0; and right:0; */ 
} 

.fourth { /* Changed to class and fixed spelling */ 
position:relative; 
/* Removed redundant top:0; and right:0; */ 
} 

ID de doit être utilisé pour des éléments qui ne seront utilisés qu'une seule fois. Les classes devraient être utilisées pour les éléments qui peuvent/seront utilisés plusieurs fois.

Answer 2

Tout d'abord, 960 n'est pas une largeur. Sans un spécificateur d'unités, c'est juste un nombre. 960px est une largeur.

Deuxièmement, ces autres div sont positionnés correctement, mais leurs largeurs sont 100% (la valeur par défaut), donc ils ont l'air d'être empilés. Le positionnement n'est pas perceptible à cause de cela. Editer: Vous avez également mal orthographié "#fourth" dans votre sélecteur CSS.

Answer 3

Pour la suite div, pourquoi ne pas utiliser inline-div? [Je ne suis pas sûr que cela fonctionne sur IE7 et ci-dessous] .. et je pense que le troisième peut être flotté vers la droite. De même, ne devriez-vous pas utiliser des classes plutôt que plusieurs éléments ayant le même identifiant?

#third { flotteur: droit; position: relative; en haut: 0; droite: 0; }

#forth { display: poste inline-block: relative; en haut: 0; gauche: 0; }