[Résolu] Le fond ne "continue" pas

Bonjour tout le monde !

Voilà mon problème est le suivant : j'ai une DIV en float sur une page (et rien d'autre, mais elle contient du texte) et la div dans laquelle elle est ne se continue pas :s .
Ca donne ça : http://chevaliers5.free.fr/css.jpg . Comme le vous voyez, la page en ORANGE ne se continue pas derrière (faites pas attention aux graphismes hein ^^).

Le code est le suivant :

(HTML)

<div id="page">
	<div class='articles'>
<div class='cadre'>

<div class='sous_categorie'>Boutiques<br><a href='index.php?p=articles&cat=shopping&sous_cat=Boutiques'> > Voir tous les articles de cette sous-catégorie</a></div>
<div class='dernier_article'>
<a href='index.php?p=articles&num=6'>
<h1 class='titre_dernier_article'>titttttre</h1>
<img height='115' src='admin/images_articles/269689001.jpg'></img>
<p class='chapeau_dernier_article'>chapeauuuuuu ...</p>
</a></div>
</div>
<div class='cadre'>
<div class='sous_categorie'>Magazines<br><a href='index.php?p=articles&cat=shopping&sous_cat=Magazines'> > Voir tous les articles de cette sous-catégorie</a></div>

<div class='dernier_article'>
<a href='index.php?p=articles&num=5'>
<h1 class='titre_dernier_article'>Titre2</h1>
<img height='115' src='admin/images_articles/'></img>
<p class='chapeau_dernier_article'>vchk jfh kjdhg hgkj ...</p>
</a></div>
</div>

et le CSS concerné :

#page {height:100%;margin-left:190px;margin-right:305px;background:orange;
font-family:Arial,Verdana;font-size:12px;padding:5px;
}
.articles .cadre {border:1px solid black; width:215px;float:left;height:250px; margin-right:5px;}
.articles .sous_categorie {background:yellow;}
.articles .dernier_article {text-align:center;}
.articles .titre_dernier_article {font-weight:bold; font-size:14px;}
.articles .chapeau_dernier_article {font-style:italic;}

Bref, un float dans ma page #page. La page est elle-même entourée de deux float (configuration 3 colonnes + 1 header en gros).

Si quelqu'un a une idée... J'en perds mon latin, et n'ai rien trouvé de satisfant chez mon ami Google .
Ca me fait ça aussi quand j'ai une image qui "flotte" à côté un paragraphe...

Merci d'avance
Modifié par Clemdups (12 Sep 2006 - 18:31)

tout est normal.
un element en float sort du flux. De Fait, son div parent ne prend pas en compte la hauteur de ses fils float pour déterminer sa propre taille.

tu peux ajouter ca dans ton bloc orange en derniere instruction :

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

Ca met un hr non visible qui ne s'occupe pas des float, du coup il va se mettre à la bonne place et ca donnera la bonne taille à ton bloc orange.

Enfin tout ca si j'ai bien compris ce que tu voulais

Zeke a écrit :
tout est normal.
un element en float sort du flux. De Fait, son div parent ne prend pas en compte la hauteur de ses fils float pour déterminer sa propre taille.

tu peux ajouter ca dans ton bloc orange en derniere instruction :

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

Ca met un hr non visible qui ne s'occupe pas des float, du coup il va se mettre à la bonne place et ca donnera la bonne taille à ton bloc orange.

Enfin tout ca si j'ai bien compris ce que tu voulais

Nickel ! Parfait ! Sensas' ! Que dire d'autre, si ce n'est un grand MERCI !

Clemdups a écrit :


Nickel ! Parfait ! Sensas' ! Que dire d'autre, si ce n'est un grand MERCI !

Mettre un petit résolu !

Modifié par Vero (11 Sep 2006 - 17:47)

Vero a écrit :


Mettre un petit résolu !

Et utiliser les propriétés avancées CSS2.1 (overflow:auto, overflow:hidden, avec un height:1% pour IE) sur le conteneur des flottants, <humour>plutôt que cette technique d'arrière garde</humour>
Modifié par Laurent Denis (11 Sep 2006 - 17:52)

(Résolu mis ! Désolé ! Première fois que j'oublie ! Et dernière j'espère )

Laurent Denis a écrit :

Et utiliser les propriétés avancées CSS2.1 (overflow:auto, overflow:hidden, avec un height:1% pour IE) sur le conteneur des flottants, <humour>plutôt que cette technique d'arrière garde</humour>

J'arrive pas avec ça . Malgré une autre propriété sur l'overflow, le cadre de la page reste vide, donc comment pourrait-il s'étendre ?
Je conçois que la technique de Zeke ne soit pas l'idéale cependant.
(et on t'a jamais dit qu'il se cachait toujours une part de vérité derrière l'humour ? )

Laurent Denis a écrit :


Et utiliser les propriétés avancées CSS2.1 (overflow:auto, overflow:hidden, avec un height:1% pour IE) sur le conteneur des flottants, <humour>plutôt que cette technique d'arrière garde</humour>

ça veut dire quoi en terme de css "un height:1% pour IE"... car cette technique me sauve la vie sous FX mais je n'arrive pas à la faire marcher pour IE

J'ai mis ça :

#global {
	position	: relative;
	margin 		: 0 auto 0 auto;
	width 		: 800px;
	/*height: 293px; */
	overflow:auto;
	overflow:hidden;
	height:1%;
	padding : 0;
	background : url(../imgs/fondSociete.gif) repeat-y;
}

Merci de votre aide.

EDIT: en fait j'ai aussi un problème avec FX... tout le contenu de mon div #global est masqué la première fois que j'affiche la page (comme pour IE)... si je rafraîchis, alors la ça s'affiche comme il faut
Modifié par Soltan13 (28 Sep 2006 - 16:37)