Espacement de ligne verticale entre deux divs

Question

J'ai donc deux divs. Un div gauche avec des liens de navigation et un div droite qui se remplit de contenu en fonction du lien que vous cliquez sur la gauche. Je voudrais avoir une ligne grise verticale entre la navigation et le contenu séparant les deux, mais j'en ai besoin pour changer de hauteur en fonction de la longueur du div contenu du côté droit. (Et aussi si le côté droit n'est pas aussi long que la navigation, laisser la ligne aller au bas de la navigation par défaut). Donc, si l'utilisateur clique sur un lien qui fait vraiment diver le bon contenu, j'ai besoin de la ligne verticale pour changer sa hauteur dynamiquement et descendre, mais si le contenu n'est pas aussi long que le nav J'en ai encore besoin pour aller jusqu'à la fin de la navigation. J'essayais des choses avec des bordures et de la hauteur: 100% mais je ne pouvais pas avoir quelque chose à travailler cross-browser. (IE et FF) Merci!

Answer 1

En supposant que votre div nav gauche a une hauteur fixe, ou une hauteur qui ne change pas souvent. Supposons que votre div nav gauche a une hauteur de 400px. Puis:

div.leftnav { 
    height: 400px; 
    float: left; 
} 

div.rightContent { 
    min-height: 400px; 
    border-left: 1px solid gray; 
    float:left; 
} 

Gardez à l'esprit que "min-height" n'est pas pris en charge par IE6.

Answer 2

Une image de fond répétée pour la div parente avec une ligne grise verticale positionnée de manière appropriée serait votre meilleur pari.

Answer 3

La réponse à cette question pourrait vous aider:

Extending sidebar down page

Answer 4

i une fois résolu ce problème en utilisant une image d'arrière-plan repated sur l'axe y. Il suffit de le créer aussi large que votre page et pas très grand, peut-être 10-20 pixels. puis répétez-le simplement vers le bas. Type de triche peut-être, mais cela fonctionne dans certains cas: p

Un exemple de la façon dont je l'ai fait, vous pouvez voir sur this website.

Answer 5

Vous pouvez laisser la division de navigation avoir une bordure sur la droite, et la div de contenu a une bordure sur la gauche. Laisser ces deux bordures se chevaucher devrait donner l'effet désiré.

Answer 6

La façon dont je le fais est de mettre les éléments dans un conteneur div avec débordement caché. Vous appliquez ensuite une bordure gauche à tous les divs répétitifs. Ensuite, sur tous les éléments enfants flottants, vous définissez les propriétés css: padding-bottom: 2000px; marge-bas-2000px;

Exemple:

CSS

div.vert-line{overflow:hidden} 
div.vert-line>div+div{border-left:#color;} 
div.vert-line>div{width:200px; float:left; padding-bottom:2000px; margin-bottom:-2000px;} 

HTML

<div class="vert-line> 
    <div>Left Side</div> 
    <div>Right Side</div> 
</div> 

Hope this helps!

Answer 7

Vous pouvez utiliser le css border-left sur la droite div.

.vertical_line { border-left: 1px solid #f2f2f2; } 

<div> 
    <p>first div</p> 
</div> 
<div class="vertical_line"> 
    <p>second div</p> 
</div>