20

I know it doesn't exist, but is there a pure CSS version?

Would like to set height, and make it 1px wide (with shadow, if possible).

Just cannot fathom a pure CSS way of doing this. Would need to be absolutely positioned.

As my container has two divs side by side, 60-40% split for example. Need the vertical rule between the two, but don't really want to use border-left on div 2.

Any suggestions?

ЯegDwight
  • 24,821
  • 10
  • 45
  • 52
422
  • 5,714
  • 23
  • 83
  • 139
  • 3
    See this: http://stackoverflow.com/questions/571900/is-there-a-vr-vertical-rule-in-html – crodjer Nov 28 '10 at 05:41
  • 1
    Thanks: I customised for our solution, albeit I thought as I asked it would be Border Left, I guess it works.
    – 422 Nov 28 '10 at 05:51

3 Answers3

15

for this you basically need to setup a place to put it and a div statement works.

 <div style="width:150px;height:2px;background-color:#000000;">&nbsp;</div>

this could also be referenced:

 .hr {width:150px;height:2px;background-color:#000000;} // in your css file/script

 <div class="hr">&nbsp;</div> <!-- IN HTML -->

You can change the position and have it going up/down or left/right with css placement and z-index

 .hr {width:2px;height:150px;background-color:#000000;position:absolute;top:0px;left:50px;z-index:10;} // in your css file/script

basically

 width            = how wide you want it
 height           = how tall you want it
 background-color = is the color you want it to be
 position         = absolute, relative, float - basically if it stays in one place or moves with page content
 top              = where to place in reference to top of page - could be margin-top
 left             = where to place in reference to left of page - could be margin-left
James Williams
  • 4,221
  • 1
  • 19
  • 35
8

This post already got a awnser but I'm facing the same problem and I found something interesting:

        hr, hr.vertically {
            color: #b2b2b2;
            background-color: #b2b2b2;
        }

        hr {
            width: 100%;
            height: 0;
        }

        hr.vertically {
            width: 0;
            height: 100%;
        }

        <div style="height: 400px;">
            a
            <hr />
            <hr class="vertically" />
        </div>

Hr means horizontal rule, adding a class vertically to it sounds close to a paradox, but it look's more organized to me.

user1330271
  • 2,601
  • 3
  • 20
  • 26
3

Put an <hr> element between the two, but style it to have the height/border/shadow that you want?

Phrogz
  • 296,393
  • 112
  • 651
  • 745