Forum : Petit casse-tête CSS

Bonjour,
Je me trouve face à un cas que ne ne parviens pas à resoudre. J'ai une div dont le contenu est variable, donc sa hauteur aussi, et qui se trouve en position absolute, collée au bottom de la page. Le problème est que suivant la taille de son contenu, cette div vient empiéter sur les éléments du dessus qu'elle ne parvient pas à chasser. Un margin-top sur cette div bottom part dans les airs sans affecter en aucun cas la div du dessus. Suis-je clair ? Que faire ? Je vous montrer la strcture de ma page et son css.

<div class="contenu">

    <div class="contenu--colleft contenu--colleft--territoires w270">
        <!-- du contenu dans la colone de gauche -->
    </div>

    <div class="contenu--colright w600">
        <!-- du contenu dans la colone de droite -->
    </div>

    <div class="cb"></div>

    <div class="contenu--colleft--pavebas">
        <!-- du contenu variable -->
    </div>

</div> <!-- #contenu -->

.w270{width: 270px;}
.w600{width: 600px;}
.contenu {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    padding: 0 10px;
}

.contenu--colleft--territoires {
    float: left;
    margin-left: 30px;
}

.contenu--colleft--pavebas {
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 300px;
    background: url(img/elmts/pavegristop.png) no-repeat;
    background-color: #DFE2DD;
}

.contenu--colleft--pavebas ul {
    margin-bottom: 20px;
    list-style-image: url('img/elmts/pucecarre.gif');
}
.contenu--colleft--pavebas ul li p{
    margin-top: 5px;
}
.contenu--colleft--pavebas ul li{
    margin-top: 14px;
    padding-left: 10px;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
}

.contenu--colleft--pavebas ul.sous li{
    margin-top: 3px;
    margin-left: -1.5em;
    padding-left: 0;
    text-transform: none;
    font-size: 0.7em;
    font-weight: 700;
    list-style-image: url('img/elmts/puce.gif');
}

/*RIGHT*/

.contenu--colright {
    float: right;
    margin-left: 40px;
}

.cb{
    clear: both;
}

Un exemple ici où je résouds le problème comme un gros bourin avec un spacer.

Si quelqu'un à une solution, moi je trouve pas…
Merci !

16 réponses

Huggy

Réponse acceptée

tu parles bien de la div .contenu--colleft--pavebas ?
Comme elle n'est pas en float, elle n'est pas dans le même flux que les autres !!!

hatfab

Auteur

Merci de m'avoir mis sur la piste, c'est résolu. Il suffisait de supprimer la position absolute après avoir passé la div en float et c'est bon !

hatfab

Auteur

Non, j'ai parlé trop vite. En fait ça ne résoud le problème qu'à moitié, seulement dans le cas ou la colone de gauche est plus grande que la colone de droite, dans le cas contraire ma div pavebas décolle. Voici deux exemples :
Colonne de gauche suffisament haute
Colonne de droite avec plus de contenu qu'à gauche

Huggy

Si tu la mets en position: absolute, elle repasse en bas
dans ce cas, tu as le margin -30px à régler

hatfab

Auteur

Oui, c'est ce que j'avais fait au début, mais du coup ça ne fonctionne pas dans le premier cas.

hatfab

Auteur

Pas simple isn't it ?

Huggy

Et simplement position:relative float:left et margin-top: 100%

hatfab

Auteur

Et non, malheureusement toujours pas. Si la colonne de droite s'agrandie, le pavé perd pieds… :/

hatfab

Auteur

En fait c'est compliqué parce qu'il faut que la colonne de droite pousse sur le bas du contener où est accroché le pavebas, et il faut en même temps que la colonne de gauche pousse sur le haut du pavebas. C'est la le casse-tête. Mais il y a peut-être un autre moyen de réaliser ça, je suis peut-être partir sur une mauvaise piste, c'est pour ça que je demande de l'aide de personnes avec un peu de recul…

hatfab

Auteur

En fait, je pense que le seul moyen c'est de récuper la hauteur de mon pavebas (qui est variable je le rappelle) et donner cette valeur (+20 px) au margin-bottom de l'élement qui est juste au dessus. Ça se fait en javascript ça ?

caoua

moi je voudrais bien t'aider cependant, je ne comprends pas bien quel est ton problème exactement !

hatfab

Auteur

Merci cacoua, finalement je crois avoir trouvé une solution mais c'est du javascript et je ne suis pas à l'aise avec ça. Je veux récupérer la hauteur d'un div et renvoyer cette valeur au style margin-bottom d'un autre élément. Pour l'instant, j'ai ça :

<script type="text/javascript">
 var hauteurpave = document.getElementsByClassName('pavebas').offsetHeight;
document.getElementsByClassName('pavebas').style.margin-bottom = hauteurpave;
 </script>

Mais ça ne marche pas…

caoua

si tu ne m'expliques pas clairement quel est ton problème, je ne pourrais pas t'aider.
Avant de s'aventurer dans je ne sais quel bidouillage via js ou autre, voyons clairement ce qui pose problème pour trouver la solution la plus adéquate possible !

Lartak

si tu ne m'expliques pas clairement quel est ton problème, je ne pourrais pas t'aider.

Il a créé un autre sujet pour son problème : Javascript » Changer une valeur d'un attribut en javascript.
Et son problème est résolu.

caoua

merci pour l'info Lartak
Bonne soirée

hatfab

Auteur

Bonsoir caoua,
En effet, j'ai déménagé avec la suite du problème vers le forum javascript car la solution semblait venir de là. Je pense que les détails mon problème étaient bien expliqués et détaillés au début de ce fil avec en plus des liens vers les pages en ligne pour voir exactement de quoi il s'agissait. Désolé si je n'ai pas été assez clair. Je ne vois pas comment j'aurais pu expliquer mieux.
Merci Lartak pour ta vigilance.
Bonne soirée et merci de ton aide.