Vertical line spacer between two divs

Question

Hi, 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 gray line between the navigation and the content separating the two, but I need it to change in height depending on how long the right side content div is. (And also if the right side isn't as long as the navigation, have the line go to the bottom of the nav by default).

So if the user clicks on a link that makes the right content div really long, I need the vertical line to change its height dynamically and go all the way down, but if the content isn't as long as the nav i still need it to go all the way down to the end of the nav.

I was trying things with borders and height:100% but I couldn't get anything to work cross-browser. (IE and FF) Thanks!

Answer 1

Assuming your left nav div has a fixed height, or a height that doesn't change often. Let's 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 2

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

Answer 3

The answer to this question might help you:

http://stackoverflow.com/questions/846792/extending-sidebar-down-page/846825#846825

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

Answer 5

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.