Adapter un conteneur au texte

**brenladais** · 19/12/2012, 19h10

Bonsoir,

J'aimerais savoir s'il est possible d'adapter la longueur d'un conteneur (div), au texte, à mesure que l'on rédige son contenu sans être obligé d'aller à taton pour trouver la bonne longueur à renseigner.

Je précises, je voudrais que tout le rectangle bleu #conteneur suive le texte ainsi que le vert #bloc_page, et pas seulement le bloc du milieu, en gros je voudrais que mes 3 blocs, s'agrandissent en même temps que celui du milieu.

Voici dans un premier temps un screen :

Et les codes sources :

Code HTML :

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style_test.css" />
        <title>Mozilla/Firefox</title>
    </head>
 
    <body>
    <div id="bloc_page">
    <header id="menu">
      <nav>
    		<ul>
    			<li><a href="index.html">Accueil</a></li>
    			<li><a href="mozilla_ff.html">Mozilla/Firefox</a></li>
    			<li><a href="intro_moteur_rech.html">Moteurs de recherches</a></li>
    			<li><a href="contact.html">Contact</a></li>
    		</ul>
    	</nav>
    	<img id="cadenas" src="images/cadenas.jpg"></a>
    </header>
    	<section id="conteneur">
    <div id="liens">
    	<nav>
    		<ul>
    			<li><a href="navi_privee.html">Navigation Privée</a></li>
    			<li><a href="ab_plus.html">AdBlock Plus !</a></li>
    			<li><a href="noscript.html">NoScript</a></li>
    			<li><a href="https_every.html">HTTPS Everywhere</a></li>
    			<li><a href="ghostery.html">Ghostery</a></li>
    		</ul>
    	</nav>
    </div>
    <div id="article"><h2 class="titre">Bienvenue sur ÊtreAnonyme.fr</h2>
    <p>ÊtreAnonyme.fr à pour but de vous faire découvrir quelques outils simple, tels que les fabuleux addons de Firefox, pour rendre votre navigation sur Internet plus sûr, et surtout de rester le plus anonyme possible.<br /></p>
	 <p>Nous allons essayer de vous faire découvrir et comprendre un maximum d'outils et "trucs et astuces" afin d'améliorer votre expérience sur le Web, et de vous prémunir des dangers potentiels contre votre vie privée et votre matériel informatique.<br /></p>
	 <p>blabla<br />
	 blabla<br />
	 blabla<br />
	 blabla</p>    
    </div>
    <div id="actualites"><h3>Actualités</h3>
    <p>Lancement d'ÊtreAnonyme.fr, Découvrez nos astuces</p>
    </div>
    	</section>
    <footer>&copy; ÊtreAnonyme.fr Tous droits réservés.
    </footer>
    </div>
    </body>
</html>

Code CSS :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
header
{
	}
p
{
	 font-family: "Cantarell", sans-serif;
    color: grey;
}
body
{
	background: url("images/bg_carbon.png") repeat-x , url("images/soft.jpg") repeat;
	}
.titre
{
	color: grey;
	}
#cadenas
{
	width: 960px;
	margin-top: 50px;
	}
#menu nav
{
	display: inline-block;
	width: 960px;
	text-align: center;
	}
#menu nav ul
{
	list-style-type: none;
	}
#menu nav li
{
	display: inline-block;
	margin-right: 15px;
	}
#menu nav a
{
	font-size: 1.3em;
	color: silver;
	padding-bottom: 3px;
	text-decoration: none;
	}
#menu nav a:hover
{
	color: white;
	border-bottom: 3px solid silver;}
#bloc_page
{
	width: 960px;
	margin: auto;
	border: 2px solid green;
	}
section
{
	border: 2px solid blue;
	background-color: white;
	width: 960px;
	}
article
{
    text-align: justify;
    border: 2px solid black;
}
div#actualites
{
    color: grey;
    font-size: 0.9em;
}
#actualites h3
{
	border-bottom: 3px solid grey;
	}
#liens nav ul
{
	list-style-type: none;
	}
#liens nav a
{
	color: grey;
	font-size: 1em;
	padding-bottom: 6px;
	font-family: Cantarell;
	text-decoration: none;
	}
#liens nav
{
	}
#liens nav li
{
	text-align: left;
	padding-bottom: 6px;
	}
#liens nav a:hover
{
	color: teal;
	}
footer
{
	font-size: 0.6em;
	}
#conteneur
{
	position: relative;
	width: 960px;
	margin: auto;
	background-color: #DDD;
	height: 300px;
	}
#conteneur div
{
	float: left;
	height: 100%;
	background-color: white;
	}
#liens
{
	width: 200px;
	}
#article
{
	width: 560px;
	margin-left: auto;
	margin-right: auto;
	}
#actualites
{
	width: 200px;
	}

Comme vous pouvez le remarquer le "blabla" dépasse du #conteneur et forcément du #article, je cherché du coup du "clear: both", mais je n'ai rien trouvé de concluant.

Idem pour l'overflow, je ne souhaites pas qu'une barre de scroll supplémentaire apparaisse.

Si vous pouviez me mettre sur la bonne voie ainsi que m'expliquer mon erreur, je vous en serait grandement reconnaissant !

Cordialement.

**NoSmoking** · 19/12/2012, 20h03

Bonjour,
dans ce cas il ne faut pas déclarer de hauteur au contenant et mettre un overflow:hidden pour qu'il suive le mouvement

Code :

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

1
2
3
4
5
6
7
#conteneur {
    background-color: #DDDDDD;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 960px;
}

**brenladais** · 20/12/2012, 11h12

Super ! merci infiniment, je n'avais pas pensé à mettre l'overflow sur le #conteneur, je l'avais mis uniquement sur le bloc contenant mon texte.

Merci encore NoSmoking !

Adapter un conteneur au texte

CSS

Discussions similaires

Partager

Partager