Discussion :

[Msieurduss]

Bonjour,

Je suis actuellement sur le développement d'un site, et j'ai un problème... Pas gênant s'il n'est pas résolu, mais autant faire les choses bien ;-)
J'aimerais que la hauteur d'une div descende tout en bas, et l'astuce du clear:both; ne fonctionne pas, et la height:100% n'est pas prise en compte.
Pour voir ce dont je parle, il faut aller ici :

http://cad-fr.com/index2.php?id_pr=2...d_te=0&lang=fr
(ne sautez pas au plafond en voyant l'adresse, l'url rewriting est désactivée pour l'instant ^^)

La div en question est celle qui contient l'image à gauche du texte, dans la page. On voit légèrement le fond orange... J'aimerais que ce fond descende jusqu'en bas.

Globalement la structure de la #page est la suivante : trois div en float:left;
Voici le code, épuré pour ne garder que les parties intéressantes ici :

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="page">
 
		<div id="image_article_gauche"><img width="278" src="upload/1244138774.jpg" /></div>
<div id="separation"><img src="img/carre_orange.gif" /></div>
<div id="contenu">
<h1>L'équipe</h1><p>blabla</p>
</div>	
 
		<div style="clear:both;" />
	</div>

CSS :
(sachant que PAGE appartient à CONTENEUR)

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
 
#conteneur {
	width: 939px;
	margin-left: auto;
	margin-right: auto;
}
#page  {
	background: url(../img/fond_page.gif);
}
	#page #image_article_gauche {
		float: left;
		width: 278px;
		background: #ff560f;
	}
	#page #separation {
		float: left;
		width: 90px;
	}
		#page #separation  img{
			margin-top: 25px;
			margin-left: 70px;
		}
	#page #contenu {
		float: left;
		padding-left: 30px;
		padding-top: 24px;
		width:500px;
		text-align: justify;
	}

J'ai essayé de mettre une height:100%, y compris sur les parents de la div en question... Rien n'y fait !
C'est la première fois que j'ai un tel problème... j'ai du louper quelque chose...
D'habitude un clear:both; en bas suffit à allonger comme il faut... là non.

Merci par avance si quelqu'un a une idée !

[desert]

Bonjour,
Il faut voir du côté des colonnes factices.
Il s'agira donc d'appliquer au div#page une image de fond de couleur orange qui va se répèter dans le sens vertical.

[Msieurduss]

Merci pour la réponse.
C'est en effet ce que je cherchais... Le pire c'est que je l'avais vu et utilisé il y a quelques années... il me fallait une mise à jour ;-)

Merci beaucoup !