Décalage table-cell firefox

Bonjour à tous

J'ai une div header avec une image en background, une div aside1 en table-cell.
Sous firefox ma div aside1 arrive en dessous de mon header ( de la hauteur de l'image) si je l'enlève mon aside1 se place bien.
Sur les autres navigateurs tout passe.

j'ai essayé de glaner des infos sur google mais rien n'y fait.

Voici mes codes

<div class="soleil">
  <div class="container">
    <div id="header">    
 <img src="images/coquelicot-bandeau.jpg"  alt="bandeau" border="0" usemap="#Map" style="border-top-left-radius:10px">
  <map name="Map">
    <area shape="rect" coords="343,146,437,165" href="http://www.instants-de-grace.com">
    <area shape="rect" coords="461,147,551,163" href="http://www.instants-de-grace.com/concept.php">
    <area shape="rect" coords="577,146,666,165" href="http://www.instants-de-grace.com/faq.php">
  </map>
  <div id="aside1"><?php include('co/log.php'); ?></div></div>

#aside1 {
	width:200px;
	vertical-align:top;
	
	background-color: rgb(152,192,0);
	border-radius:10px;
	margin-right:3px;
	
	float:right;
	margin-top:3px;  box-shadow: 0px 0px 10px #e3dfc6; padding:5px; text-align:center ; 
}
#aside1, #header {display:table-cell; vertical-align:top}

Si un expert en css peut m'expliquer et corriger le phénomène ??

D'avance Merci

Bonjour,

Tu place en display:table-cell; 2 div imbriqué -> ce n'est pas logique.

Le div enfant(en table-cell) est adjacent à une image, qui ne peut en aucun cas se comporter comme une cellule de tableau (table-cell;). -> formatage comme un tableau impossible.

Pour reproduire un affichage de type tableau il te faut au moins un conteneur en display:table; (.. il y a toute une famille: table-caption, table-row, etc.) et au moins un élément enfant en display:table-cell;, à partir de 2 tu peut visuellement aligner verticalement leur contenu respectifs.
ex:

<header>
<p><img .../><map ...> ...</map></p>
<aside>....</aside>
</header>

header {display:table;width:xx;}
p, aside {display:table-cell;vertical-align:XX;}

D'un autre coté, ton image en display:inline-block; peut s'aligner a un autre élément de type "en ligne" ou inline-block; ce qui ferait:

img, aside {display:inline-block;vertical-align:XX;}

Ou aussi mettre l'image en float et laisser aside se positionner a coté dans le fllux ou le faire flotter aussi.

Float et display ne se cumulent pas, float l'emporte. Float n’étire pas son conteneur et fait un saut de ligne si devant lui il y a un contenu non flottant, voir "float", "clear" ou "contexte de formatage/layout" en général.

Il y a plein de petite chose que tu ne connais pas encore, prend le temps de comprendre ce que chaque règle implique et évite de mélanger celle-ci ou des techniques un peu plus complexes.
float ou display, il faut choisir

Cordialement,
GC

Bonjour

Et merci d'avoir répondu : ben j'ai choisi : float
le display table:parent existait mais je ne l'ai pas mentionné dans mon post.

en fait j'avais une div globale (soleil) avec le display:table parent
premier niveau : le header qui devait se mettre à côté d'un aside (en table-cell)
deuxième niveau : le content avec un autre aside ( en table-cell aussi)
troisième niveau : puis le footer

Par contre je ne comprends pas pourquoi attribuer display:table à header

au final j'ai tout repositionné dans le flux en flot et cela marche sur FF
oui clear flot je connais aussi.

j'avais acheté l'excellent livre html5 et css3.

merci je vais relire attentivement ce que tu m'as écris tout de même et retesté deux ou 3 trucs. En effet j'ai deux div imbriquées.

Ceci dit ce qui est bizarre c'est ce que cela marchait sur les autres navigateurs : allez comprendre
Modifié par nomieandme (22 Feb 2012 - 17:19)

nomieandme a écrit :

Par contre je ne comprends pas pourquoi attribuer display:table à header

Disons que ton css et html n’étaient pas cohérent et que j'ai simplement fait un "dessin"..

Sur le fond, parent et enfant en display:table-cell, ça le fait pas

++