CODEWITHSUNDEEP
htmlcss
Rajat Gupta
Rajat Gupta

Reputation: 26597

Vertical bar that extends to length of longer among two adjacent divs

I have two adjacent div(s). I need to separate them by vertical bars.

So I use the following css : 

#div1{
    border-right: 1px solid #CCC;
}
#div2{
}

But the problem is that the height of both the div(s) isn't fixed. Sometimes div1 is longer & at other times, div2. & thus the vertical bar created by border css property is not visible to full length of div1+ div2. How can I create a vertical bar that has height equal to longer among the 2 div(s).

Not looking for a javascript solution.

Upvotes: 1

Views: 90

Answers (2)

Dylan Hayes
Dylan Hayes

Reputation: 2366

Here is my suggestion from the comment

#div1 {border-right:1px solid #ccc;}
#div2 {
     border-left:1px solid #ccc;
     margin-left:-1px;
}

Upvotes: 4

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Try something like this:

#div1 {border-right:1px solid #ccc;}
#div2 {
    border-left:1px solid #ccc;
    margin-left:-1px;
}

Demo

Upvotes: 1

Related Questions