[résolu] Problème de mise en forme avec float

Bonsoir!

Je débute de CSS et je bute sur un problème qui avec des tableaux est plus que basic, mais ici ça fais un sacré moment que je cherche et ne trouve rien...

Je me suis fais un petit design et voilà le problème:

J'ai un menu et un contenu, mis en page avec la fonction float.

Selement, j'arrive pas à faire en sorte que la longueur s'adapte au coté le plus long, il reste adapté en fonction de la longueur du texte qu'il contien...
le height: 100%; n'y change rien...

--> http://www.le-dahu.org/test/page.html <-- en dessou de Un paragraphe, il n'y a plus rien, je voudrais qu'il continue j'usqu'au bas du design..

J'ai concience que le CSS que j'ai fais est loin d'être propre

si qqn à une sollution à ce problème, répondez-moi vite merci
Modifié par Blue_Ke< (13 Sep 2005 - 23:27)

Bonjour Blue_Ke et bienvenue sur Alsacréations,

Blue_Ke a écrit :
si qqn à une sollution à ce problème, répondez-moi vite merci

Le plus rapide pour ne pas avoir attendre une réponse est dans beaucoup de cas de d'abord faire un tour par la recherche et par la faq de ce forum, où tu aurais trouver ceci par exemple: Comment faire des "colonnes" de même hauteur ?

Oui c'est exactement ce que j'ai fais sur google et ce forum, je suis même tombé sur le lien qui tu m'as donné mais rien n'y fais, mes colonnes restent ainsi...

salut,
en passant vite fait, j'ai editer ton css sous firefox, je ne sais donc pas si cela fonctionne avec les autres navigateurs:

j'ai ajouter un clear both a ton pied de page,
deplace et positionner ton image background (middle)de #contenu dans body;
et mis la couleur de fond de body a html pour cacher l'image de fond quand ta page est plus courte que ta fen^tre.
donc la modif css faite (je te laisse te documenter pour comprendre un peu mieux les reactions des valeurs et attributs css) :

html {background: #125F47}
body
{
background: url(images/cadre_midle.jpg) repeat-y 234px;
	margin: 0px;
	padding: 0px;
	/*background: #125F47;*/ /*edit: faute de frappe !*/
	text-align: center ;
}

div#conteneur
{
	width: 1000px ;
	margin: 0px;
	padding: 0px;

	
	text-align: left ;
}


h1#header
{
	margin: 0px;
	padding: 0px 0 0 0px;

	width: 907px;
	height: 191px;
	background: url(images/header.jpg) no-repeat top;



}

div#menu_tot
{
	float:left;

	margin: 0;
	padding: 0;
/*
width: 231px ;
*/
}

div#menu_titre
{
	background: url(images/menu_haut.jpg) no-repeat;
	width: 204px ;
	height: 25px;
	margin: 0 ;
	padding: 0;
	padding-top: 15px;
	padding-left: 30px;
	text-align: center;
	overflow:hidden;

}

div#menu_bas
{
	overflow:hidden;
	background: url(images/menu_bas.jpg) no-repeat;
	width: 234px ;
	height: 9px;
	margin: 0 ;
	padding: 0;

}

div#menu_t_bas
{
	overflow:hidden;
	background: url(images/menu_t_bas.jpg) no-repeat;
	width: 234px ;
	height: 74px;
	margin: 0 ;
	padding: 0;

}


ul#menu
{

	background: url(images/menu_midle.jpg);
	width: 234px ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#menu li
{
	margin: 0;
	padding: 0;

	position: relative;
  	left: 90px;

	text-align: left ;
}





div#pos_cadre
{
	float:left;
	overflow:hidden;
	margin: 0;
	padding: 0;

}

div#contenu_haut
{

	overflow:hidden;
	background: url(images/cadre_haut.jpg) no-repeat;
	width: 673px ;
	height: 11px;
	
	margin: 0;
	padding: 0;


}



div#contenu
{
	

	margin: 0;
	padding: 0 0px 0 100px ;

	width: 573px ;
	
	background: url(images/cadre_midle.jpg) repeat-y;

}

div#bas
{
	overflow:hidden;
	width: 907px ;
	height: 56px;
	background: url(images/t_bas.jpg) ;
clear:both;
}

je te laisse essayez ce css a la place du tien ..
a plus
Modifié par gcyrillus (13 Sep 2005 - 17:29)

Ha ça semble marcher sous IE

Je vais voir les modif et te dis un grand merci