how to draw a vertical line between two option boxes using css

Question

I have two option boxes populated. I would like to display a vertical straight line between the two and in middle of the line write "OR". I do not remember where but I've seen this be done in some place. Basically the user will be able to select either of these two option boxes.

I've placed the code on jsbin.

Answer 1

I modified it for you, check here.

Basically idea is to put those select boxes in divs and float them.

Answer 2

erm, I guess you could have 3 divs in a row (all float: left;) and the middle one could be black background set height and the outside two could have the select boxes in them?

Answer 3

Add a new div with a background image (the line) and the text or written inside ;) Than you have to use the float css property. Everybody can aready chose elements from the two option boxes...

Answer 4

I realise you've already accepted an answer, but I thought I'd offer you this option as well:

http://jsbin.com/aweto3

It differs slightly from @Sarfraz's answer, in that includes the vertical line, though that's pretty much just a minor css difference. Though I've also tidied up the code and used a <form> and <fieldset> elements, too... =)