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

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 your multiple DIV approach is going to be the sanest way to approach this:

<DIV>
   <DIV style="width: 50%; border-right: solid 1px black">
      /* ascx 1 goes here */
   </DIV>
   <DIV style="width: 50%">
      /* ascx 2 goes here */
   </DIV>
</DIV>

Answer 2

Just tested this; works:

<div id="left" style="width:50%;float:left;background:green;">left</div>
<div id="right" style="margin-left:50%;border-left:solid 1px black;background:red;">right</div>

Answer 3

Three divs?

<DIV>
   <DIV>
      /* ascx 1 goes here */
   </DIV>
   <DIV style="width:1px; background-color: #000"></DIV>
   <DIV>
      /* ascx 2 goes here */
   </DIV>
</DIV>

Answer 4

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;}