Vertical border between floating divs using CSS

Question

I have the following HTML structure

<div id='parent'> <div id='child-1'>Some text goes here</div> <div id='child-2'>Different text goes here</div> <div class='clear'></div> </div> 

I also have the following CSS

 #parent { width: 800px; position: relative; } #child-1 { width: 500px; float: left; } #child-2 { width: 200px; float: left; } .clear { clear: both; } 

Now the contents of the child DIVs ( child-1 and child-2 ) can be anything, so ultimately child-1 can have a higher height than child-2 , or child-2 can have a longer height than child-1 .

What I want to do is have a vertical line between child-1 and child-2 , and this line has a length of DIV, which is of great height. I tried the border for both DIVs (the right border for child-1 and the left border for child-2 ), but this is not a good idea, because the line will look thick when two DIVs touch each other, and then thin for the extended part.

How can i do this? I also like to use CSS only if possible, without jQuery and JavaScript. If you think you need additional DIVs, then this is normal.

Thank you

Answer 1

I tried the border on both divs (the right border is on the child-1 and the left border is on the div-2, but this is not a good idea because the line will seem thick where the two divs are touching each other and then thin for the extended part.

This is a good way to go, really. The last step, however, is to give the correct div a negative left margin of 1px (assuming the border is 1px wide) so that the two borders overlap.

 #child-1 { width: 500px; float: left; border-right: 1px solid gray; } #child-2 { width: 200px; float: left; border-left: 1px solid gray; margin-left: -1px; } 

Another option is to use display: table for the parent, and then display: table-cell in the columns, and then have one border between them.

Answer 2

Plain:

 elements { border-left: black solid 1px; } elements:nth-child(1) { border-left: none; } 

Answer 3

try using

 border-left:1px solid #color; margin-left:2px; 

and

 border-right:1px solid #color; margin-right:2px; 

Answer 4

You can also give border-right: 1px solid #000; only to your first div, if this div is longer than the second div and if the second div is longer, you can assign border-left: 1px solid #000; only to your second div.