Imbrication de div

Bonjour, je cherche a faire une mise en page d'un bloc tout en div.
Mais je me trouve coincé quand je doit imbriquer dans une div d'autre div dont les dimention sont fix.

Le Code

<div class="result_recherche">
	<div><img src="images/template/ciseaux_coupon.gif" /></div>
	<div class="result_recherche_fond_pointille">
		<div class="result_recherche_reduc">&nbsp;</div>
		<div class="result_recherche_logo">&nbsp;</div>
	</div>
	<div class="result_recherche_fond_bleu">
		<div class="result_recherche_ag_aff"><a href="#">toto 1</a></div>
		<div class="result_recherche_cond_leg"><a href="#">toto 2</a></div>
		<div class="result_recherche_autre_offre"><a href="#">toto 3</a></div>
		<div class="result_recherche_rdv"><a href="#">toto 4</a></div>
	</div>
	<div><img src="/images/template/bas_moteur_de_recherche.gif" align="top" /></div>
</div>

Le Css

.result_recherche { width:650px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; padding-top: 10px; }

.result_recherche_fond_pointille { background-image: url(../../images/template/pointille.gif); background-repeat: repeat-y; }
.result_recherche_reduc { height: 106px; width: 106px; border: 1px solid #000000; margin-left: 16px; display: block; float: left; }
.result_recherche_logo { height: 106px; width: 106px; border: 1px solid #000000; float:left; display: block; margin-right: 16px; }

.result_recherche_fond_bleu { background-color: #006DB8; height: 28px; }
.result_recherche_ag_aff { font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 10px; display: block; float: left; padding-top: 16px; padding-left: 16px; }
.result_recherche_ag_aff a { color: #FFF; text-decoration: underline; }
.result_recherche_cond_leg { font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 10px; display: block; float: left; padding-top: 16px; padding-left: 80px; }
.result_recherche_cond_leg a { color: #FFF; text-decoration: underline; }
.result_recherche_autre_offre { font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 10px; display: block; float: left; padding-top: 16px; padding-left: 16px; }
.result_recherche_autre_offre a { color: #FFF; text-decoration: underline; }
.result_recherche_rdv { font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 10px; display: block; float: right; padding-top: 16px; padding-right: 16px; }
.result_recherche_rdv a { color: #FFF; text-decoration: underline; }

j'ai oublié de dire que je voulais que mes 2 bloc de 106*106 soit l'un a coté de l'autre
Modifié par christobal (07 Jun 2009 - 15:59)

Hello,

hum... au-delà de ton problème tu sembles être atteint de divite aigüe !

l'élément DIV est sémantiquement neutre et il est bien pratique pour regrouper d'autres éléments. Par contre il faut utiliser les autres éléments HTML pour structurer son document : lire à ce sujet http://openweb.eu.org/articles/respecter_semantique

Je te l'accorde.
Je vais faire un tableau.
Mais comme c'est fait pour rentrer dans une boucle et être répété autant de fois que de résultats, je me disais que les div était plus légére a afficher.

As tu tout de même une idée pour mon pb ?

christobal a écrit :
Je vais faire un tableau.

Pourquoi un tableau ? As-tu lu les articles dont je t'ai donné les liens ?

Voir également Le point sur la sémantique.

Pour ce qui est du positionnement il faut d'abord Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne puis prendre le temps de lire en détail le Guide du positionnement CSS.

En passant, les images sans attribut alt c'est pas valide et c'est pas bien. Les images avec un attribut alt renseigné au pif pour que ça passe la validation ben c'est valide, mais c'est pas bien non plus.

Ceci ne m'avance pas bien dans la résoluton de mon pb, mais tu as tout a fait raison.
Tu constateras que je suis au debut de la conception de mon tableau.
cette image sera en Bg car elle fini le look de ce bloc.