Soucis avec un cite et un div cote à cote dans un li

Bonjour,
J'ai un soucis avec un <cite> et un <div> cote à cote dans un <li>

En fait, je travaille sur un livre d'or et j'ai prévu mon code comme cela:

<ol>
	<li>
		<cite>
                 ...............
		 <span>......</span>
                 <span>......</span>
		</cite>
		<div>
		.....
		</div>
		<div style="clear:both"> </div>
	</li>
</ol>

ensuite le css:

ol {
	margin:0; 
	padding:0;
	width:auto; 
	height:auto;
	list-style:none;
}

li {
	margin: 1em 0;
}

et

cite {
	float: left;
	text-align:left;
	width:20%;
	overflow: hidden;
  height: 1%;
}

div {
	border-left: 1px solid #000; 
	float:left;
	margin: 0 0 0 1em;
	padding:0 0 0 1em;
}

Je souhaite que le tout soit en fluide et que le cite fasse env 20 % de la largeur totale (le esret pour le div) avec la même apparence sur tous navigateurs.

Mon soucis actuellement vient du fait que le div passe sous le cite si le contenu est trop important (sous FF only) (Le contenu du div peut être multiples: images, text, liens, etc...)

Sinon la sémantique vous parait-elle correcte dans le cas présent ?
Merci à ceux qui pourrons m'aider.

Je mets un screen pour vous donnner une idée

Diaboloz a écrit :
Sinon la sémantique vous parait-elle correcte dans le cas présent ?

Non. CITE n'est pas l'élément adapté pour le nom d'un locuteur dans une série de messages. Il se prête mieux au balisage des noms d'oeuvres, de sites web, magazines, journaux, etc.

Et CITE n'est certainement pas un élément adapté pour regrouper une somme d'informations, liens d'action divers, etc.
Quel est le rendu obtenu en désactivant les styles et les images? Ça te semble bien organisé, ou bien c'est un fouillis inextricable?
Je pencherais plutôt pour un DIV, au sein duquel je placerais sans doute deux ou trois paragraphes, suivant le détail des informations à baliser.

Pour le problème de positionnement CSS: ne pas faire flotter le deuxième bloc. Une marge à gauche peut suffire.

Et tu peux virer les <div style="clear: both"></div>, et gérer le dépassement des flottants directement dans la feuille de styles, sans ajout d'élément supplémentaire.

(Enfin, je ne suis pas sûr que j'aurais utilisé une liste pour encadrer des contenus si importants. Après la divite aigüe, la listite aigüe. Mais ça reste correct tout de même, je pense.)

Merci

Je vais voir avec un div à la place du cite.
Par contre faut que je revoie ma sémantique parceque là je pensais qu'un cite semblait tout indiqué (en fait sur le screen y a aussi des images qui ne seront pas visibles à tous).
Effectivement le cite contiendra (pseudo, date et heure, image url et mail) donc bcp trop.

a écrit :
Après la divite aigüe, la listite aigüe

C'est vrai, dans le cas présent je pense que j'avais trois possibilité
- listes
- listes de définitions
-Div

Mais en ce moment je suis atteint de listite j'ai pensé liste de message un peu comme les commentaires.

@+ et merci encore pour ces précieux renseignements
Modifié par Diaboloz (09 Dec 2008 - 20:57)