[Résolu] Alignement en bas de blocs

Bonjour à tous

Après de nombreuses recherches sur le Web et sur Alsacréations, je n'arrive toujours pas à résoudre mon problème, donc je vous l'expose ici en espérant que vous pourrer m'aider

J'ai un bloc général (page) qui contient un header et un menu d'abord, mais surtout (le coeur du problème) un bloc de contenu qui prend toute la largeur de la page.
Dans ce bloc, il y a 2 blocs. Le premier doit contenir une image d'illustration et le 2e le contenu du site.

Je souhaiterai que l'image contenue dans le bloc de gauche soit alignée en bas donc alignée sur le bas de la zone droite de contenu.

Voici mon HTML et ma CSS :

<div id="page">

    <div id="banniere"></div>
    <div id="menu"></div>
    <div id="drapeau"></div>
    <div id="sousmenu"></div>
    <div id="content">
        <div id="content-left"></div>
        <div id="content-right">
            <div id="titreArticle"></div>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

html{
	height:100%;
}

body{
	margin:0; /* pour éviter les marges */
	padding:0;
	width:100%;
	height:100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	background-color:#e3e9ff;
    	text-align: center; /* pour corriger le bug de centrage IE */
	background-color: #ffffff;
	background-image: url(/img/fondBanniere.png);
	background-repeat:repeat-x;
}

#page {
	position:absolute;
	border: #000000 solid 1px;
	width:858px;
	left: 50%; 
	margin-left: -429px; /* moitié de la largeur */
	text-align: center;
}

#content{
	float: left;
	width:100%;
	margin-bottom:15px;
}

/*Contenu gauche contenant l'image à aligner en bas*/
#content-left {
	float: left;
	width: 25%;
}
/*Contenu droite contenant le contenu du site*/
#content-right {
	float: right;
	width:70%;
	border: solid #000000 1px;
	font-family: "Trebuchet MS", Verdana, sans-serif;
}

#footer {
	clear:both;
	background-image: url(/img/fondPiedPage.png);
	background-repeat:repeat-x;
	width:100%;
	height:61px;
	text-align: center;
}

Dans cette version, l'image est en haut dans le bloc de gauche.
J'ai essayé pas mal de choses dont block-inline mais sans succès ...


Des idées ?
Modifié par kiouz (26 Jan 2009 - 14:55)

a écrit :
Je souhaiterai que l'image contenue dans le bloc de gauche soit alignée en bas donc alignée sur le bas de la zone droite de contenu.

je ne suis pas bien sûr de comprendre, tu veut que l'image soit alignée en dessous du block de gauche ? ou tu veut afficher l'image a coté du block de gauche , mais en bas de la page ?

Je viens de faire vite fait une petite image pour montrer où je voudrais placer l'image


Modifié par kiouz (23 Jan 2009 - 16:50)

#content-left { position: relative; }
#myimg { position: absolute; bottom: 0; left: 0; }

Est-ce cela que tu recherches ?

Malheureusement, cela ne fonctionne pas, cela m'a monté l'image en haut à gauche du div "content", par dessus tous les autres éléments du site

Hello,

kiouz a écrit :
Malheureusement, cela ne fonctionne pas, cela m'a monté l'image en haut à gauche du div "content", par dessus tous les autres éléments du site

Certainement parce que tu as oublié la ligne #content-left { position: relative; }

Heyoan a écrit :
Certainement parce que tu as oublié la ligne #content-left { position: relative; }

Plutôt parce que, contrairement à ce que montre le schéma, les deux colonnes (gauche et droite) n'ont PAS la même hauteur. Pour peu que la colonne de gauche soit plus courte (ce qui est probablement le cas la plupart du temps), l'image positionnée en absolu ne sera pas en bas à gauche de la zone de contenu.

Il faudrait peut-être utiliser div#content comme référent positionné en relatif, et pas div#content-left. Ou bien utiliser une image de fond sur div#content s'il s'agit d'une simple décoration et que c'est possible dans le cas présent.
Modifié par Florent V. (23 Jan 2009 - 19:24)

Effectivement, les deux colonnes n'ont pas la même hauteur car celle de droite contient le contenu de la page et celle de gauche seulement l'image que je souhaite positionner vers le bas. De plus, la colonne de droite gérant le contenu de la page, elle n'a pas toujours la même hauteur ...

C'est pour cela que j'ai créé un div "content" englobant les deux colonnes. Comme la colonne de droite sera toujours la plus grande des deux, la colonne de droite et le div "content" auront donc toujours la même hauteur.

Mais j'arrive pas coller l'image de la colonne de gauche en bas, donc en gros de faire en sorte que la colonne de gauche ait la même hauteur que le div "content"

A quand une gestion de variables en CSS (récupération de hauteur d'un div et affectation ) ?

Bref, des idées ?
Modifié par kiouz (26 Jan 2009 - 09:24)

En tout cas, mettre #content-left { position: relative; } ou #content{ position: relative; } ne change rien du tout, l'image est toujours positionnée en haut à gauche de mon site.

C'est peut-être à cause du position absolute de la page principale ?
Même si je la mets en relative, ca fait la même chose ...

kiouz a écrit :
Mais j'arrive pas coller l'image de la colonne de gauche en bas, donc en gros de faire en sorte que la colonne de gauche ait la même hauteur que le div "content"

Qu'est-ce qui te fais croire que tu as besoin de positionner ton image en bas du bloc de gauche (qui n'est pas une colonne)? Pourquoi ne pas le positionner tout simplement en bas à gauche du conteneur (#content)?

Eh oui, tout simplement !!!

Merci Ô grand maître du CSS !!!!!!!