DIV et fieldset

**margagn** · 25/02/2008, 23h55

Salut!

Dans le source HTML ci-dessous, j'ai deux DIV. L'un qui contient seulement des <p> et qui grossi en fonction du texte à l'intérieur et l'autre qui contient un <fieldset> et qui ne grossi pas. Pourquoi? Je sais que je ne devrais pas utiliser un fieldset sans le tag form, mais bon... Est-ce que quelqu'un a une idée du pourquoi? Est-ce que c'est possible de régler cela?

Merci de votre aide!

Martin

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Test Page</title>
	<style>
        body
        {
	        font-family: Verdana;
        }
 
	    h6
	    {
	    	font-size: 11px;
	    	font-weight: 700;
	    }
 
	    fieldset
	    {
	    	float: left;
	    	display: block;
	    	border: solid 1px;
	    	width: 300px;	    	
	    	padding: 10px; /* Espace à l'intérieur de la boîte */
	    	margin-right: 10px;
	    }
 
        .parent 
        {
        	border: solid 1px yellow;
        }
 
	</style>
</head>	
 
<body>
 
    <div class="parent">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor feugiat turpis.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor feugiat turpis.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor feugiat turpis.</p>
    </div>
 
    <br />
    <br />
 
    <div class="parent">
        <fieldset>
            <legend>ABCD</legend>
            <h6>ABCD</h6>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor feugiat turpis.</p>
 
            <h6>ABCD</h6>           
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor feugiat turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor feugiat turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor feugiat turpis.</p>
        </fieldset>    
    </div>
 
</body>
</html>

**Erwan31** · 26/02/2008, 00h51

Bonsoir,
tu ne dois pas utiliser un élément en fonction de la mise en forme qu'il va générer... Le fieldset n'est pas fait pour ça tu es au courant manifestement.

**Bisûnûrs** · 26/02/2008, 07h55

Le fieldset est en float, donc hors flux, ce qui fait que son parent n'en tient pas compte pour calculer sa hauteur.

Tu peux rajouter overflow:hidden sur la classe parent pour corriger le problème. Pourquoi ? Une recherche sur "nouveau contexte de formatage" te donnera plus de renseignement.

Tu peux aussi lire cette page qui te donnera les autres propriétés qui créent une nouveau contexte de formatage :
http://www.blog-and-blues.org/articl...s_de_formatage

DIV et fieldset

CSS

Vue hybride

Discussions similaires

Partager

Partager