<h3> côte à côte 50%

Bonjour la communauté,

Grand amateur de votre site, je poste rarement dans votre forum, parce qu'on trouve souvent les réponses. Mais pour une fois je n'arrive pas à trouver une solution. (qui je pense doit être toute simple).

Je voudrais disposer 2 balises titre <h3> cote à cote. Voici mon code xhtml:

<div id="forum_contenu">
    <h3 class="forum_titre float_left">Catégories du Forum</h3>
    <h3 class="forum_titre float_right">Derniers messages</h3>
</div>

et le css

.forum_titre{background:#807667;width:49%;margin:10px 0 0 0;display:inline;}

J'ai essayé de mettre en pixel mais je me retrouve avec des différences suivant le navigateur utilisé.
- Avec FF3.5 mes 2 titres sont bien cote à cote et prennent toute la largeur du <div>
- Avec IE8 il y a un esapce entre les 2 titres
- Avec Opéra le second titre passe en dessous

Vous pouvez voir le résultat sur cette page de test:

http://annuaire.troyens.free.fr/index.php?mod=forum

Merci d'avance de l'aide apportée et bon dimanche.
Modifié par stef2cr (18 Oct 2009 - 18:32)

Salut,

ça ne peut effectivement pas fonctionner puisque tu déclares d'une part une largeur de 48% au niveau de .forum_titre et d'autre part un padding de 5px au niveau de h3 ce qui ne tombera jamais juste en fonction du navigateur utilisé.

Tu pourrais donc faire :

.forum_titre {
   ...
   width: 50%;
   padding: 5px 0;
}

Sauf qu'il ne faut pas faire comme ça car le vrai gros problème est au niveau de ta structure sémantique : le fait de mettre tes 2 élément H3 (et non balises ) côte à côte fait que les élément H4 qui suivent sont rattachés au dernier H3 alors qu'ils devraient l'être au premier. Pour rappel il faut d'abord partir de la structure html avant de s'interroger sur la présentation css.

Salut,

Au passage, mettre des dimensions à des éléments qui sont en display:inline et dire que ça fonctionne relève du miracle ou de la coïncidence. Pas d'une méthode fiable.

Bah, inline-block me paraît tout indiqué puisque c'est exactement sa fonction.

Bonjour,

Merci de vos réponses, j'ai donc utilisé block-inline.

Mais comme l'a dit Heyon je vais refaire mon code parce que je ne respecte pas la sémantique des éléments h3-h4 ( bien appris la leçon )

Stefff