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..

    html, css: How to cause a div be presented on top of other divs

    How to keep a link underlined after it is clicked and then hovered over

    How to displaying and hiding again the div after clicking a button

    How to stack multiple divs on top of each other and each have a height of 100%

    How to implement CSS sprite background into existing Javascript variable?

    Adding buttons to slideshow

    How to hide crossed-out CSS lines on firebug?

    How to apply custom css to split post into multiple page

    Want to duplicate css styles for an ID based style, how to do this with least duplication?

    How to add CSS to my HTML code on Notepad++

    How to make my words not go under my picture in css

    How to align an image to the center with css?

    Have element show when .onclick and when the element has focus from tab

    Bootstrap: Background image z-index to show it above bg color

    how to make textarea looks like input[text] on form invalid

    How can I drag an element into a dropdown list using jQuery UI sortable()?

    How can I get a box shadow to start below a thick border?

    How to use css value for javascript in IF-THEN construction? [closed]

    How can I center an unknown number of block elements of unknown widths in a block container of an unknown width?

    How to make a curved edge hexagon by using CSS

    How to give different views for same url for different devices with same resolution?

    How can I prevent my button from being mangled?

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    How to add left margin and wrap long lines in code tag

    How to create slideshow in css without having to make more than one class?

    How do I make XAMPP use the paths from my Wordpress themes folder?

    How would I go about editing the polar clock counter clockwise?

    How can I slide the sidebar out of view and make the content flexbox resize to fill the void?

    Images don't show up in quiz results after start over button

    How to give shadow to a border