css border around two divs - html

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">My ads</div>
<div id="closed">Favorites</div>
</div>
<div id="pbase"></div>

Answer 1

#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 2

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">My details</div>
<div class="menu">My ads</div>
<div class="menu">Favorites</div>
</div>
<div id="pbase"></div>

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">My Details</div>
<div class="tab-nav">My ads</div>
<div class="tab-nav">Favorites</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>