CODEWITHSUNDEEP
htmlcss
Lisa
Lisa

Reputation: 9

How to add a single border for 2 divs next to each other?

First thing, sorry if it's a dumb question... I have created 2 divs, one on the left of the page, the other one on the right. The problem is, I want to put a single border around the 2 divs (and not 1 border for each div). I just don't know how to target the 2 divs and make the border surround both divs like it was one element.

Here is my html:

    <div class="left2">

        <img src="images/mistake.jpg" class="img2"/>

    </div>

    <div class="right2">

        <p>###########</p>

    </div>

And here is my css:

div.right2 {
    width: 40%; 
    padding: 2% 5% 0 0;
    float: right;
}

div.left2 {
    width: 40%; 
    padding: 2% 0 0 5%;
    float: left;
    padding-bottom: 50px;
}

Thank you for your help!!

Upvotes: 1

Views: 1802

Answers (2)

AleOtero93
AleOtero93

Reputation: 498

You can set this border in the 2 divs:

div.right2 {
    width: 40%; 
    padding: 2% 5% 0 0;
    float: right;
    border: 1px solid #000;
    border-left: none;
}

div.left2 {
    width: 40%; 
    padding: 2% 0 0 5%;
    float: left;
    padding-bottom: 50px;
    border: 1px solid #000;
    border-right: none;
}

And put the divs next to each other, so there will be no border between divs.

Upvotes: 1

user2964536
user2964536

Reputation: 111

One way is to put both of the divs in an outer div and then make a border around that.

HTML: <div id="outer"> <div id = "left"></div> <div id = "right"></div> </div>

CSS: #outer { border: 1px solid red; } #left { ... } #right { ... }

Upvotes: 2

Related Questions