Reputation:

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 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!

Upvotes: 19

Answers (7)

Kofi Sammie

Reputation: 3627

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>

Upvotes: 0

Jin

Reputation: 574

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.

Upvotes: 18

rkingon

Reputation: 1073

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!

Upvotes: 1

tobbez

Reputation: 317

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.

Upvotes: 8

Svish

Reputation: 158051

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.

Upvotes: 1