Problème de bas de page

[Lorène]

Bonjour à tous et merci d'avance pour votre aide

En fait je n'arrête pas de parcourir les tutos mais là je bloque et avec mon collègue on en vient à chercher sur les forums comme le votre un peu d'aide :a_thumbsup_20:

Voilà j'ai tout simplement 3 DIVs alignés et lorsque le contenu du 2ème est trop long, le DIV n°2 passe sous le 3ème alors que je préfèrerai que le 3ème se décale vers le bas...

En image ça donne ceci :

(Edit : URLs supprimée à la demande de l'auteur)

Et le code parait tout simple :

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #105C5C;
}
#conteneur
{
	width: 800px;
	min-height: 100%;
	_height: 100%; 
	border: 1px solid red;
}
#bloc1
{
	background-color:#000099;
	width: 600px;
	display:block;
}
#bloc2
{
	background-color:#FF0000;
	width: 600px;
	display:block;
}
#bloc3
{
	background-color:#00CC00;
	width: 600px;
	bottom:0px;
	position:absolute;
	margin:0px;
	display:block;
}

Je voudrais que mon DIV vert se déclae vers le bas et reste sous le rouge !

Merci d'avance pour votre aide

@++

[Perrine]

Bonjour Lorène,

Je crois que j'ai pas compris

Tu as 3 blocs et tu souhaites que les 3 s'affichent à la suite ? L'un en dessous de l'autre ?

Ton bloc 3 ne contient pas de texte aussi il est difficile de voir où il s'affiche

[ghost]

Bonjour,

Moi non plus, je n'ai pas tout compris !! Mais sans comprendre, verifie déjà :

html, body {
height: 100%;
margin: 0;
padding: 0;
background: #105C5C;
}
#conteneur
{
width: 800px;
min-height: 100%; ----------------------------------------> ????
_height: 100%; -------------------------------------------->  ?????
border: 1px solid red;
}
#bloc1
{
background-color:#000099;
width: 600px;
display:block;---------------------------------------> ????
}
#bloc2
{
background-color:#FF0000;
width: 600px;
display:block;---------------------------------------> ????
}
#bloc3
{
background-color:#00CC00;
width: 600px;
bottom:0px;
position:absolute;---------------------------------------> ????
margin:0px;
display:block;--------------------------------------------> ????
}

Cordialement.

[Lorène]

Voilà en fait exactement le problème :

(Edit : URLs supprimée à la demande de l'auteur)

J'aimerai que ma fenêtre s'adapte à la hauteur de mon texte principal, que mon pied de page reste en bas et que ma colonne avec scroll soit de la taille de la fenêtre pincipale...

Ca me paraît pas énorme mais peut-être que je me trompe et que je m'attaque à trop lourd

Merci en tout vas pr votre aide...

[Perrine]

Tu souhaites que ton texte soit écrit sur le bloc en fond blanc, c'est ça ?

Et que ta colonne qui est à l'heure actuelle à droite, soit placée où ? Sur la droite du texte sur fond blanc ? Au dessous de l'image à gauche ? Tu souhaites conserver le scroll ?

Je viens de regarder un peu ton code, je suis pas super à l'aise avec les positionnements en absolute. L'idéal serait de voir quel tuto tu as souhaité refaire, et/ou surtout de savoir quelle mise en page tu recherches. Je te renvoie vers une page qui récapitule plein de mises en page css

[ghost]

Re bonjour,

Je comprends mieux !!

1ere chose ton css ne passe pas sous FireFox (le scroll)

Si tu n'as pas besoin du scroll et que tu veuilles que on texte soit dans le fond blanc et que le conteneur s'adapte en hauteur, il faut reprendre quelques "bricoles" dans ton css.

Je te conseille d'aller faire un tour là http:()//css.alsacreations.com/Modeles-de-mise-en-page-en-CSS.

Cordialement.

[Lorène]

Géant, merci beaucoup... clair que je commençais un peu à tout mélanger vu le nombre d'heure que je passe dessus !!!

Bonne ocntinuation à toutes et tous... :a_thumbsup_20:

Lo