28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous, alors voila mon petit souci... j'ai trois div à la suite, qui sont des float left, j en ai un des trois qui est plus haut que les autres,

j'aimerais que celui qui est plus haut soit aligné avec les autre sur LE BAS et non sur le haut!

voici une explication en image :

avant

après

mon code n'est qu'une suite de div, celui du dessus est celui du "rechercher" qui N EST PAS EN FLOAT LEFT

comment faire pour que ma troisième pub empiète vers le haut ?
Modifié par godscourge (02 Nov 2009 - 09:46)
je me répond tout seul Smiley lol

alors on dit que le bloc recherche est le div1,
a droite du bloc recherche (zone vide) il y a le div2

J'avais fait l'erreur de mettre mes pubs en DESSOUS du bloc recherche, grave erreur!

pour faire ce que je voulait :

- Faire un div2 apres le div1(larecherche) mettre le div1 et le div2 en

float:left;
position:relative;


le position relative est le plus important, ca fait tout!

apres on passe la pub numéro1 dans le div1 et les deux suivantes dans le div2

on rajoute ceci au trois pub
position:absolute;
bottom:0;


par contre ma pub3 viens se superposer sur ma pub2 donc jai du rajouter

left:51%;
sur ma pub3^^

et voila

inspiration :
http://www.dynamicsitesolutions.com/css/align-elements-to-bottom-of-container/

mon code final :


#centre .recherche (c'est le div1)
				{
				background:url(../images/bg_recherche.gif) no-repeat;
				width:306px;
				height:536px;
				float:left;
				position:relative;				
				}

#centre .contenu (c'est le div2)
				{
				
				width:630px;;
				height:536px;
				float:left;
				position:relative;		
				}
				#pub1
				{
				position:absolute;
				bottom:0;
				width:302px;
				height:122px;
				border:#000000 solid 1px;
                                background:url(../images/pub1.jpg);
				}
				#pub2
				{
				position:absolute;
				bottom:0;
				left:1%;
				float:left;
				width:302px;
				height:122px;
				border:#000000 solid 1px;
                               background:url(../images/pub2.jpg);
				}
				#pub3
				{
				position:absolute;
				bottom:0;
				float:left;
				left:51%;
				width:302px;
				height:250px;
				border:#000000 solid 1px;
				background:url(../images/pub3.jpg);
				}