18100 sujets

Questions générales et questions de débutants

Soucis avec hauteur en %

Bonjour à tous,
ceci est mon premier message sur ce site,

j'aurais besoin d'un coups de main sur la création d'un site que je suis entrain de faire,

Mon site se compose en 3 partie:
-le header avec le menu principal,
-le conteneur, contenant 2 colonnes, une qui float a gauche, avec un menu et l'autre qui float a droite avec le contenu de mon site
-le footer avec des petites infos

le soucis que je rencontre est au niveau de la séparation des 2 div qui se trouve dans mon conteneur,
j'aimerai avoir une séparation entre ses 2 divs qui s'adapte toute seule à la hauteur la plus grande.

je me suis orienté donc sur le systeme de hauteur en % mais je n'y arrive pas,
j'ai donc placé pour le moment une bordure a gauche sur ma div qui float a droite


Voici la structure du site et le css :

<div id="conteneur">
<div id="header"></div>
<div id="contenu">
    <div id="menugauche"></div>
    <div id="conteneur2"></div>
</div>
<div id="footer"></div>
</div>



#conteneur {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    background-color:#FFF;
    position: relative;
    z-index:0;
    -moz-box-shadow: 0px 0px 10px #999;
    -webkit-box-shadow: 0px 0px 10px #999;
    box-shadow: 0px 0px 10px #999;
}
 
#conteneur2 {
    float:right;
    width:740px;
    margin-right:15px;
    padding: 35px 15px 35px 29px;
    min-height:400px;
    position:relative;
    border-left: 2px solid #0e71b8;
}
 
#header {
    height: 205px;
}
 
#menugauche {
    float:left;
    width:159px;
        padding-top: 35px;
    height:94px;
    border-right: 2px solid #0e71b8;
}
#footer {
    height:94px;
    line-height: 94px;
    text-align: center;
    font-size: 10px;
}
Salut,

Si j'ai bien compris ta demande, je pense que les hauteurs en pourcentage, ce n'est pas forcément le plus simple, d'autant plus avec des flottants qui par définition sont hors du flux naturel du document.

Cela dépend de ton contexte, mais tu peux peut-être te pencher sur la solution des colonnes factices, et jouer sur le background de #conteneur. Voici un lien sur cette technique :
http://www.pompage.net/traduction/colonnesfactices .
Modifié par Rach (22 Sep 2015 - 16:05)
Vous cherchez à faire quelque chose dans ce goût là ?

Ce layout a été réalisé avec flexbox (compatible seulement à partir de IE10), mais vous pouvez très bien opter pour un modèle tabulaire (display : table, compatible dès IE8). Je vous laisse expérimenter les différentes solutions.
Administrateur
Olivier C a écrit :
Vous cherchez à faire quelque chose dans ce goût là ?

J'aime beaucoup cette idée Smiley smile

Petit bémol, IE10-IE11 ne gèrent pas les min-height sur un élément Flex, c'est un bug connu.
L'astuce consiste à entourer le flex-container (ici body) par un autre flex-container, par exemple :

html {display: flex; flex-direction: column;}
Bonjour,
Olivier C + Raphael = Tout est dit et en plus un format d'école Smiley smile
Bien entendu parfaitement "responsive-web-design" Smiley cligne
Sujet clos
Aller à