[Résolu] Positionnement DIV

Bonjour, tout d'abor je doit vous informer que je suis un newbie avec tout ce qui a un rapport au WEB.

Mon problème (ou plutôt l'ensemble de mes problèmes ) est le suivant :
J'ai un ensemble de DIV placés de la façon suivante :

<div id="Div1">
  <div id="DivImg" style="float:left">
    <img />
  </div>
  <div id="DivContentImg" style="float:left">
    <div id="DivT"></div>
    <div id="DivT2"></div>
    <div id="DivL"></div>
  </div>
</div>

Le rendu doit être le suivant :

1/le DivImg et DivContentImg doivent rester côtes à côtes quelques soit la largeur de l'image et aucun débordement n'est permis.

2/le DivL doit se situer toujours au bottom du DivContentImg au même niveau que la fin du DivImg dans le cas ou le height DivContentImg est < à celui du DivImg

Solutions appliquées :

1/Code JQuery pour calculer le height du DivContentImg le comparer à celui du DivImg, s'il est inférieur j’additionne la différence au height du DivT2.

Fonctionnel partiellement: IE7 ne calcule pas pas le height, résultat : il additionne toujours le height de l'image à celui du DivT2

2/utilisation de l'attribut position:relative et bottom:0 pour DivL, résultat: il est positionné en dessous du DivContentImg.

J’espère avoir bien expliqué le problème et merci à tout ceux qui m'aideront.
Modifié par Said (17 Feb 2012 - 15:22)

Bonjour,

Tu nous montre un code HTML qui correspond à un début de solution pour répondre à un problème de mise en page. Le problème, c'est que ce début de solution est peut-être bien une fausse piste, et qu'on peut s'échiner à t'aider à placer ton #DivL où tu veux alors que ton problème de design est peut-être plus simple ou plus compliqué que ça.

Donc je propose que tu montres la partie de design qui pose problème, et on pourra t'en dire plus.

J'avais crus bien faire, en expliquant mon approche mais en faite vous avez raison, ça peut être une fausse piste , voici donc le rendu que je dois avoir.

Hmm... ça va être compliqué à faire en CSS. En dehors de mécanismes de mise en page CSS3 encore pas/peu implémentés par les navigateurs (Flex Box et Grid Layout), je ne vois pas trop. On peut toujours essayer de ruser un peu avec du positionnement absolu, mais c'est jouable uniquement si l'élément à placer en bas a une hauteur fixe (et comme il contient du texte il n'est pas censé avoir une hauteur fixe).

Du coup je recommanderais un tableau de mise en page, comme il y a 10 ans.
Deux colonnes, deux lignes, et la première cellule en rowspan="2".

Oui, en fait vous avez absolument raison, et c'est si simple en y pensant alors que je me compliquais la vie !!!
Merci bien, vous me sauvez la vie , et vous me simplifiez tout le code