Petit problème de CSS

il y a des problèmes d'accès au forum on dirait... mais voici mon message original :

hello !

Voici ma page : http://tinyurl.com/2efsjb

Je ne comprend pas pourquoi le bloc #fiche_film ne va pas jusqu'en dessous du bloc #film_infos qu'il contient.
Le bloc est en relative, donc il devrait non ? J'ai essayé de mettre des clear:both; par-ci par-là, rien n'y fait.

D'autre part, j'aimerais que ma liste soit alignée sur la gauche. J'ai mis un margin:0 et un list-style-position: inside pour le UL, mais ça ne marche pas.

J'aimerais aussi que le .synopsis (le texte lorem ipsum) se décole de un peu du bloc #film_infos, mais ça ne marche ni avec un padding, ni avec un margin...

Pouvez vous jetez un oeil (aargh !)?

merci !

Voici mes CSS :

/*FICHE FILM*/
#fiche_film {
	margin:auto;
	width:70%;
    border:solid 1px #3F80B6;
	background-color:white;
	padding:5px;
}
#fiche_film #film_infos{
background-color:#f7f7f7;
float:left;
padding:5px;
text-align:center;
border:solid 1px #3F80B6;
margin-top:5px;
}
#fiche_film #film_infos span{
display:block;
font-variant:small-caps;
text-decoration: underline;
text-align:center;
}
#fiche_film #film_infos ul {
	list-style-position: inside;
	line-height:normal;
	text-align:left;
	margin:0;

}
#fiche_film #film_infos li {
	list-style-image: url(images/arrow_right.gif);
	list-style-position: inside;

}
#fiche_film #titre {
	font-variant:small-caps;
	padding:5px;
	padding-left:20px;
	letter-spacing:0.3px;
	background-color: #777;
}
#fiche_film #film_infos .synopsis {
	float:left;
	margin-left:5px;
}

gordie a écrit :

Je ne comprend pas pourquoi le bloc #fiche_film ne va pas jusqu'en dessous du bloc #film_infos qu'il contient.
Le bloc est en relative, donc il devrait non ? J'ai essayé de mettre des clear:both; par-ci par-là, rien n'y fait.

Tu sembles avoir des lacunes au niveau du positionnement css. Je te conseille vivement la lecture des articles suivants tirés d'Openweb:
• Initiation au positionnement CSS : 1.flux et position relative
• Initiation au positionnement CSS : 2.position float
• Initiation au positionnement CSS : 3. position absolue et fixe

Pour ton soucis, il vient simplement du fait que ton bloc flottant est extrait du flux, et par conséquent inexistant aux yeux de son conteneur qui s'arrête donc au plus grand contenu du flux.
Tu peux créer un contexte de formatage afin que ton conteneur prenne en considération son enfant flottant et l'englobe:

#fiche_film {overflow:auto}

..............



No Comment -

Thank'Zz Benjamin.......

Ok, ça marche !
En effet, j'ai un peu appris sur le tas....
Et pour ce qui est d'un retrait à droite du bloc synopsis par rapport au bloc film_infos ?

Merci !