Vertical Line Spacer Between Two Divs

So I have two divs. One left div with navigation links and one right div that populates with content depending on what link you click on the left. I would like to have a vertical

Solution 1:

Assuming your left nav div has a fixed height, or a height that doesn't change often. Let's suppose your left nav div has a height of 400px. Then:

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

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

Keep in mind, "min-height" is not supported by IE6.

Solution 2:

A repeating background image for the parent div with a vertical grey line positioned appropriately would be your best bet.

Solution 3:

You could let the navigation div have a border on the right, and the content div have a border on the left. Letting those two borders overlap should give the desired effect.

Solution 4:

i once solved this by using a background image repated on the y axis. Just create it as wide as your page and not very tall, maybe 10-20 pixels. and then just repeat it downwards. Kind of cheating maybe, but it works in some cases :p

One example of how I did it you can see on this website.

Solution 5:

The way I do this is to put the elements into a container div with overflow hidden. You then apply a left border to all repeating div's. Then, on all floating child elements you set the css properties: padding-bottom:2000px; margin-bottom-2000px;

Example:

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!