css border around two divs

Question

Hello guys need your help by merging two <div> s' borders. Here is what I want to get and what I've gotten until now: enter image description here and this is what i want to do enter image description here

Could someone please tell me how to do so? Here is my code if it helps something:

css :

#plink {

    position: relative;
    width: 200px;
    float: left;
}

#open {

    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    width: 200px;
    text-align: center;
    line-height: 50px;

}

#closed {
    border: 1px solid black;
    width: 200px;
    text-align: center;
    line-height: 50px;

}

#closed:hover a {
    display: block;
}


#open:hover a {
    display: block;
}

#pbase {

    border: 1px solid black;
    position:relative;
    width: 600px;
    height: 300px;
    float: left;
}

and html :

<div id="plink">
<div id="open">My details</div>
<div id="closed"><a href="ads.php">My ads</a></div>
<div id="closed"><a href="fav.php">Favorites</a></div>
</div>
<div id="pbase"></div>  

Answer 1

Set border-right color white and use z-index to keep open menu on over the right part. Try like following. Hope this will help you.

#open {
    border-color: black #fff black black;
    border-style: solid;
    border-width: 1px;
    line-height: 50px;
    position: relative;
    text-align: center;
    width: 199px;
    z-index: 1;
}

Update:

 $('.menu a').click(function (e) { e.preventDefault(); $(this).closest('div').siblings().removeClass('open'); $(this).closest('div').addClass('open'); }); 

 #plink { position: relative; width: 200px; float: left; } .open { background-color: #a7a7ff !important; border-right: 1px solid #a7a7ff !important; line-height: 50px; position: relative; text-align: center; z-index: 1; } .menu { border: 1px solid black; width: 200px; text-align: center; line-height: 50px; background-color: #5e5eb6; } .menu:hover a { display: block; } .open:hover a { display: block; } #pbase { border: 1px solid black; position: relative; width: 600px; height: 300px; float: left; background-color: #a7a7ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="plink"> <div class="menu open"><a href="details.php">My details</a></div> <div class="menu"><a href="ads.php">My ads</a></div> <div class="menu"><a href="fav.php">Favorites</a></div> </div> <div id="pbase"></div> 

Answer 2

#plink {
    position: relative;
    width: 200px;
    float: left;
    border-top: 1px solid black;
    border-left: 1px solid black;
}
#open {
    border-bottom: 1px solid black;
    border-right: 1px solid white;
    text-align: center;
    line-height: 50px;
}
#closed {
    border-bottom: 1px solid black;
    width: 200px;
    text-align: center;
    line-height: 50px;
}
#pbase {
    border: 1px solid black;
    position: relative;
    width: 600px;
    height: 300px;
    float: left;
    margin-left: -1px;
    z-index: -1;
}

https://jsfiddle.net/8rrov5hb/

This was achieved by setting #pbase with margin-left: -1px and z-index: -1 to put it behind #plink

The div #open has border-right: 1px solid white to make it appear transparent - just change this to whatever background color you need

Answer 3

A couple of issues. You were using multiple id's with the same name, these should have been changed to classes. and 'open' / 'active' should be a state set with a class.

There was duplication in the css for the different states.

The main takeaway is that you needed to change the width of the active `.tab-nav'.

css was missing box-sizing

 * { box-sizing: border-box; } .tab-navigation { position: relative; width: 200px; float: left; } .tab-nav { border-top: 1px solid black; border-left: 1px solid black; background-color: white; width: 200px; text-align: center; line-height: 50px; } .tab-nav:last-of-type { border-bottom: 1px solid black; } .tab-nav:hover, .tab-nav.open { width: 202px; } .tab-nav a { display: block; } #pbase { border: 1px solid black; position:relative; width: 600px; height: 300px; float: left; z-index: -1; } 

 <div class="tab-navigation"> <div class="tab-nav open"><a href="details.php">My Details</a></div> <div class="tab-nav"><a href="ads.php">My ads</a></div> <div class="tab-nav"><a href="fav.php">Favorites</a></div> </div> <div id="pbase"></div> 

Answer 4

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('#plink').click(function(){
        $('#open, #pbase').css('border','2px solid #000');

    })

})

</script>