28173 sujets

CSS et mise en forme, CSS3

[Resolu] Realiser 2 colonnes de largeurs egales et d'une largeur ...

Bonjour tout le monde,

voila j'aimerais avoir 2 blocs cote a cote qui aient des largeurs egales et qui tiennent sur une largeur totale definie.

Je n'arrive pas à obtenir ce que je veux, les blocs sont soit l'un sur l'autre soit la largeur totale n'est pas atteinte ... Ces 2 blocs ont une bordure de 2 px et se situent sous un bloc plus gros ayant lui aussi une bordure de 2 px.. C'est pour cela qu'il faut que les 2 petits blocs du dessous s'alignent bien avec le gros bloc du dessus ...

Extrait de mon code :


div#last {  /*le div englobant*/
	position:relative;
	width: 512px;
}

div#last div.lastDoc { 
	float:left;
	width: 48%;
	border: 2px solid #CCCCCC;
	margin:0;
}

div#last div.lastTopic{ 
	float:left;
	margin-left:4%;
	width: 48%;
	border: 2px solid #CCCCCC;
}


ps: j'utilisais avant la position absolut et cela marchait correctement au niveau largeur mais le pied de page remontait, la position float permet de descendre le footer ...

Merci par avance
Modifié par kvndevils (02 Jul 2006 - 10:22)
J'ai deja cherché et passé pas mal de temps ... et resultat il y a des tas de bugs possibles et envisageables ... je m'y perd ..

je viens de mettre en ligne la page concernée :
ici

(Ce sont les 2 cadres en bas de page)
Modifié par kvndevils (04 Jul 2006 - 12:20)
kvndevils a écrit :
J'ai deja cherché et passé pas mal de temps ... et resultat il y a des tas de bugs possibles et envisageables ... je m'y perd ..

je viens de mettre en ligne la page concernée :
ici

(Ce sont les 2 cadres en bas de page)

Modifié par kvndevils (04 Jul 2006 - 12:20)
ton probleme ne doit survenir que sur IE avec son " 3px jog " sur les autres nav en principe il n'y a pas de probleme.
et pour IE la solution consite a doubler un des 2 blocs avec propriete:


#blocadd {
position: relative;
left: -3px; 
margin-right: -3px,
}

ce qui aura pour effet de boucher l'espace de 3px laissé par IE
Modifié par jp94 (30 Jun 2006 - 15:34)
a oui merci j'avais deja trouvé 2 3 trucs dessus mais la je pense que le probleme est encore plus evident car meme sous FF ca ne va pas ...

Ce qui est etonnant c'est qu'il y a vraiment un gros decalage si je met par exemple 48% pour celui de gauche et 48% pour celui de droite avec un margin -left de 4% pour celui de droite alors que ca devrait coller non ? 48% de la taille + 4% de margin + 48% encore ...

Cela pourrait il venir des bordures ? ou est-ce que le margin en % a un comportemeent spe ? ...

je ne vois pas .....
re,
tu peut mettre le code tu bloc au dessus et du bloc parent des 2 petits blocs
si il y en a un.
+
Voila j'ai mis un extrait le plus complet possible ..
Tous ces bloc sont imbriqués les uns dans les autres ..
ps:je suis un newbie dans le css Smiley smile soyez indulgents 


body {
	width: 800px;
	margin: 0px auto 0px auto;
	color:#000000;
	background-color: #ffffff;
	font: 11px "Trebuchet MS", helvetica, sans-serif;
	
	background-image:url(images/invaderObiblio2.gif);
	background-position:left bottom;
	background-repeat:no-repeat;

}


div#corps{
	position: relative;
	width: 783px;
	margin: 10px 0px 10px 0px;
	border: 3px solid #000000;
	color:#000000;
	background-color: #ffffff;
}


div#gauche {
	float: left;
	width: 528px;
	/*border: 1px solid #CCCCCC;*/
	margin: 0px 0px 0px 0px;
}


div#gauche div {
	text-align: justify;
	color:#000000;
	background-color:#FFFFFF;
}

div#news {
	position:relative;
	width: 512px;
	margin: 7px 0px 0px 7px;
	border: 2px solid #CCCCCC;
}

div#last {  /*le div englobant*/
	position:relative;
	width: 512px;
}

div#last div.lastDoc { 
	float:left;
	width: 48%;
	border: 2px solid #CCCCCC;
	margin:0;
}

div#last div.lastTopic{ 
	float:left;
	margin-left:4%;
	width: 48%;
	border: 2px solid #CCCCCC;
}
Salut kvndevils

Essais de mettre çà :


div#last div.lastTopic{ 

	float:right;

	margin-right:-3px;

	width: 48%;

	border: 2px solid #CCCCCC;

}


Sous FF cela fonctionne. J'ai pas pu tester sous IE. tien moi au courant.

@ ++
merci pilate pour ton aide, je viens d'essayer et sous FF le probleme semble resolu les cadres s'alignent correctement .. en revanche sous ie la bordure droite disparait ..

Je chercherai et testerai plus en detail demain ..
si tu veux voir ce que ce la donne, je lai mi en ligne ..

ici

ps: j'ai mi le width a 49% pour reduire l'ecart entre les 2 blocs ..

merci encore
Modifié par kvndevils (04 Jul 2006 - 12:21)
Re !!

Je crois que j'ai trouvé.

Essais ça et tiens mois au courant.


div#last {
	position:relative;
	width: 516px;
	margin: 7px 0px 7px 7px;
}
div#last div.lastTopic{ 
	float:right;
	width: 49%;
	border: 2px solid #CCCCCC;
}


@ ++
c'est bon ca marche ca s'aligne bien ...
Comment tu justifierai ca ? pourquoi avoir augmenter le width de 4 ?

merci beaucoup pour ton aide en tout cas
Sujet clos
Aller à