[Résolu] Problème de mise en forme sous Dotclear 2

Bonjour, j'ai recemment créé un thème dotclear 2, c'est tant mieux, je suis fier de mon taff et tout, celà dit, un petit problème persisite et je ne trouve pas la solution. Comme vous pouvez le constater la sidebar à tendance à se retrouver en bas de page, je ne comprend pas pouquoi.
Voici le code concerné: (sidebar, main et footer)

#main {
	width: 474px;
	float: left;
    background: #FFFFFF;
	padding-left: 10px;
	height: 100%;
	padding-right: 3px;
	display: table-cell;
	margin-right: 2px;
}

#sidebar {
	width: 272px;
    background: #FFFFFF;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 5px;
	display: table;
	height: 100%;
	border-left: 2px solid #efefef;
}

html>body #main {
	float: left;
}

#footer {
	width: 100%;
	height: 25px;
	background-color: #FE127D;
	padding: 0 0 0 0;
	clear: both;
	background-position: center;
	margin-bottom: 0px;
	margin-top: 0px;
	display: table;
	position: relative;
}

J'aimerais ajouter que le problème survient de manière tout à fait aléatoire, mais plus souvent lorsque la page comporte des billets assez longs, lorsqu'elle est longue...
Merci d'avance
Modifié par Truzzi (19 May 2007 - 14:27)

salut,
ben écoute, pour moi sur ie7 et ff2 et des brouettes la sidebar est à sa place. Si le problème a lieu sous ie6 ce doit simplement être un problème de largeur, un pixel en trop et hop il balance le pavé la où il trouve de la place là où les autres ont une tendance avérée à "écarter un peu les bords" (enfin, ff, pas toujours mais là apparemment si). Ca pourrait bien être les pixels de bord gauche que tu n'aurais pas comptés dans la largeur totale du truc.

En revanche, sur ff ton footer passe par dessus le contenu et "bouffe" une bonne partie du dernier pavé de texte qui se retrouve sans fond... c'est un genre de problème récurrent avec ff avec les float, clear et autres positions relatives. Par ex, si ton conteneur contient des élements en float, il faut qu'il soit lui même affecté d'un float pour suivre le contenu jusqu'en bas, etc, etc, genre de trucs à perdre quelques poils parfois avant de trouver où est le problème

have swing
Modifié par virtualgadjo (19 May 2007 - 13:45)

Plusieurs solutions pour avoir deux colonnes :
- display: table-cell sur les deux colonnes (pas de float) ;
- float sur les deux colonnes ;
- float: left sur la première colonne, et margin-left de la largeur de la dite colonne sur la deuxième ;
- float: left sur la première colonne, et contexte de formatage à coup de overflow: hidden pour que la deuxième soit bien repoussée par le flottant. À corriger pour IE6 et inférieurs avec une propriété CSS conférent le layout (voir le concept de HasLayout dans IE Win).

Par contre, il n'est pas recommandé de mélanger allègrement ces solutions.

Pour ma part, et vu le site, je vote pour la troisième solution, qui ne demandera pas de correctif particulier, et qui sera plus adaptable que la seconde. La première, pour sa part, ne sera pas comprise par IE6 et 7.

Le problème survient sur firefox en fait...
Sur Opera et IE7, j'ai testé et ça marche bien.

Le problème du footer est assez étrange, parce que je ne le voyais pas sur mon pc, quelque soit le naviguateur utilisé. C'est en changeant de poste que je l'ai remarqué... Je crois que c'est résolu maintenant, non?

Merci à vous deux =D