18041 sujets

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

Pb hauteur de div dans div

Bonjour,
Un grand classique de l'alignement que je n'arrive pas à résoudre :
J'ai 2 divs dans un conteneur div, mon premier div (colomnLeft) se retrouve ne pas avoir la meme hauteur que son voisin (colomnBody). Tout ce petit monde se retrouve dans div (CentralFrame).
Le soucis est particulierement présent sur http://www.levalentino.fr/ parce que j'ai forcé la hauteur de colomnLeft.
J'ai bien tenté un after ou clear, rien ne passe.
Le but de la manoeuvre est que les deux divs s'affichent avec la meme hauteur...
Merci.
Je ne suis pas sur d'avoir réellement compris le résultat escompte.. J'ai fais ça pour avoir les div left et right au même niveau, élargit ta central frame pour que ce soit aussi large que ton slider et ton peied de page.. 


#CentralFrame {
    height: 300%;
    margin: auto;
    position: relative;
    top: 0;
    [b]width: 900px;[/b]
    z-index: 1;
}

#colomnLeft {
    background-color: rgba(255, 255, 255, 0.7);
    height: 100%;
[b]    left: 0;
    margin: 0 auto;[/b]
    position: absolute;
    width: 190px;
}

#colomnBody {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 2px 5px 5px 1px rgba(0, 0, 0, 0.5);
    display: block;
    [b]margin: 0 auto;[/b]
    padding: 10px;
    position: absolute;
    [b]right: 0;[/b]
    [b]width: 690px;[/b]
}
}


Je n'ai pas retouché ton code qui pourrait être plus propre. . Smiley murf
Bonjour,
aujourd'hui tu as display:flex et display:table/table-cell; pour faire 2 colonnes ,
hier tu avais la technique des fausses colonnes et la bonne vielle mehode du clear, ici revisité avec un pseudo-element :
http://codepen.io/anon/pen/dIvik/ (survol l'un ou l'autre des div ... le gauche est transparent , technique proche des fausses colonnes)
Blond,
merci pour reponse et remarque, seulement, il ne sagit pas d'un soucis de largeur mais de hauteur de div.
gcnomade, bien essayé de mettre display:table sur mon #CentralFrame et display:table-cell sur #colomnLeft et #colomnBody, qui me semblait logique mais pas de changement.
Pour la solution clear, essayé aussi et normalement, cela fonctionne, sauf dans le cas présent, se pourrait-il que cela soit du au fait que la colonne la plus petite vienne en premier?
c'est un problème classique... surtout si les div ont un fond.

Il y a une astuce CSS en combinant des valeurs de padding et margin très grandes et opposées (l'une positive et l'autre négative).

Si je retrouve une source de cela, je le mettrai ici...
regarde mon post plus haut , que j'avais édité.

par contre ton effet d'ombre portée risque de ne plus être possible.

et méfie toi du positionnement absolu
Modifié par lionel_css3 (31 Mar 2014 - 14:38)
j'ai mis plus large pour ton ombre portée... Smiley langue et l’esthétisme de ta page, header et footer de 900, pourquoi le milieu a 800 ? ce n'est pas moi le designer mais bon Smiley biggol c'est toi qui choise Smiley biggrin

si tu vire tes règles sur tes margin, tes deux colonnes devrait ce trouvé à la même hauteur puisqu’elles sont sous ton header.. ..

Si c'est pour la partie basse de tes div, tu as cas mettre un height 100% sur la partie texte comme tu as mis sur ta partie menu, et hop c'est fini. faut virer tes marges négatives. D'ailleurs à ce sujet tu devrait créer une div menu qui passe au dessus de ton header pour éviter des marges négatives...
Sujet clos
Aller à