How can I put a vertical line down the center of a

Question

How do I put a vertical line down the middle of a div? Maybe I should put two divs inside the div and put a left border on one and a right border on the other? I have a DIV tag and I need to put one ascx on the left (that will get swapped out from time to time with another ascx) and then a static ascx on the left. Any ideas on how I should do this? Maybe I answered my own question.

Any pointers would be great

Answer 1

I think you need a wrapper div with a background image. If not, then you are not guaranteed to have the border go all the way from the top to the bottom.

<div class="wrapper">
    <div>Float this one left</div>
    <div>float this one right</div>
</div>

*be sure to leave the space between the left and right for the image to show up.

you'll need a style that looks like:

.wrapper{background:url(img.jpg) 0 12px repeat-y;}

Answer 2

Although this question was asked 9yrs ago and a lot of the answers would "work". CSS has evolved and you can now do it in a single line without using calc.

One liner (2018) answer:

background: linear-gradient(#000, #000) no-repeat center/2px 100%;

How this works

1. linear-gradient(#000, #000) this creates a background-image so we can later use background-size to contain it.
2. no-repeat this stops the gradient from repeating when we do put background-size on it.
3. center - this is the background-position this is where we put the "diving line"
4. /2px 100% - this is making the image 2px wide and 100% of the element you put it in.

This is the extended version:

  background-image: linear-gradient(#000, #000);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center center;