How to create border between two divs with dynamically changing heights?


Tags: css

Problem :

I have two divs, and their height is changing dynamically. The left div might be taller than the right one, and opposite is also possible. How to create a border between them that can change dynamically according to their height? The border should be from the top to the bottom of the row. I am using Bootstrap 4, and I prefer to be only CSS.

html

<div class="container">
    <div class="row">
        <div class="left col-md-6">a</div>
        <div class="right col-md-6">asdasdasd
            <br/>a
            <br/>asdsad
            <br/>asd
            <br/>asd
            <br/>asdsa
            <br/>d
            <br/>as
            <br/>d
            <br/>asdsad
            <br/>asdasdasd
            <br/>
        </div>
    </div>
</div>
<br/>
<div class="container">
    <div class="row">
        <div class="left col-md-6">
              <br/>a
            <br/>asdsad
            <br/>asd
            <br/>asd
            <br/>asdsa
            <br/>d
            <br/>as
            <br/>d
            <br/>asdsad
            <br/>asdasdasd
            <br/>
        </div>
        <div class="right col-md-6">
           asdasd
        </div>
    </div>
</div>

https://jsfiddle.net/ravepgz6/



Solution :

You can simply give both containers a border and give the right div a margin-left: -1px;.

.left {
    border-right: 1px solid black;
}
.right {
    border-left: 1px solid black;
    margin-left: -1px;
}

https://jsfiddle.net/ravepgz6/1/

This will, however, fail if you have a percentage-based gap between the divs (as might result from using Bootstrap columns). For that use case, please describe or even better, show an image of what the result should look like.


    CSS Howto..

    How to use the CSS pseudo element :before in multiple classes of same element

    How can I override an inline style with an external css?

    How to control layering in HTML/CSS without making links nonfunctioning?

    How to place div in top right hand corner of page

    PHP: How to style session output [closed]

    How to override a part of the style in the site.master page?

    How to manage textarea right side overflow in css?

    How can I make jQuery's draggable function expand the container?

    Flexbox and Bootstrap How to Put Image in Navbar Brand Area

    How to reset inline css applied by jquery?

    How to debug the different behavior of the same browser on the different platforms?

    How does css position impact element width/height?

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    How can I insert text before an item with CSS?

    How to center a div with CSS?

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    How to select the table heading of the first row in table using css selectors?

    How might I get an element's border color value using jQuery?

    How do you maintain CSS layout when adding content (ASP.NET)

    How am I supposed to change the Bootstrap CSS properties in a new Yeoman project?

    How to only make the opacity lower for the background and not the text in it?

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    How to make a webpage look like a popup? [closed]

    How can I prevent divs animated using CSS keyframes from colliding

    How to fire a new css animation when the element already has one?

    How to use jQuery to fade in/out li a:hover css background-color?

    How to make a dynamic html form using css and js

    How to override active admin CSS?

    How to apply advanced styling for all portlets of one kind

    How To Pick Desired Image From CSS Sprites In A DIV Background And Position It?