Vertical line spacer between two divs

Question

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 verti

Answer 1

The answer to this question might help you:

Extending sidebar down page

Answer 2

you can use the css border-left on the right div.

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

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

Answer 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.

Answer 4

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.

Answer 5

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.

Answer 6

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