Discussion :

[seufer]

Bonjour

Je n'arrive pas à placer des div enfants dans un autre div parent avec une bordure
Je voudrais que les div "a" et "b" soient a l'intérieur de la bordure du div "maitre", sans pour autant spécifier la hauteur du div "maitre"

Voici mon code, pouvez-vous m'aider SVP ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id "maitre" style="border: 1px solid black;">
    <div id="a" style="float:left;width:200px;">contenu A</div>
    <div id="b" style="float:left;width:200px;">contenu B</div>
</div>

Merci

[Auteur]

bonjour,

tu n'as pas le choix ton div "maitre" doit être également en float :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id="maitre" style="float: left;border: 1px solid black;">
    <div id="a" style="float:left;width:200px;">contenu A</div>
    <div id="b" style="float:left;width:200px;">contenu B</div>
</div>

dans ton code tu as oublié un = après l'id du div "maitre".

[Linaa]

Bonjour,

En utilisant la propriété float, tes éléments sortent du "flux".
Tu peux également utiliser la propriété

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position:relative;

(position relative par rapport au conteneur)

[seufer]

Merci pour vos réponses, j'ai essayé les 2 solutions, mais ca ne fonctionne pas vraiment avec IE et Firefox

Pour résoudre mon problème, j'ai ajouté un <div style="clear:both"></div>

Voici le code pour infos, et ca marche !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="maitre" style="border: 1px solid black;">
    <div id="a" style="float:left;width:200px;">contenu A</div>
    <div id="b" style="float:left;width:200px;">contenu B</div>
    <div style="clear:both;"></div>
</div>

[Auteur]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div style="clear:both;"></div>

tu peux remplacer ton div vide par hr (auquel il faudra ajouter la propriété hidden) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<hr style="clear: both; visibility: hidden">