CODEWITHSUNDEEP
htmlcss
Khushang Bhavnagarwala.
Khushang Bhavnagarwala.

Reputation: 687

Remove the border where two division intersect

I am attaching two division's border and remove the border where two division intersect but its not remove. I have tried this code.

<div style="border:solid 1px #CCC; 
margin: 15px 0px 0px 350px; 
border-bottom:none; 
padding:12px 12px 8px 12px; 
border-radius:5px 5px 0px 0px; 
width:300px; 
text-align:center;">

<strong style="font-size:18px; color:#000">ABC</strong> 
</div>
<div style="width:968px; 
float:left; 
margin:0px 15px 15px 15px; 
border: solid 1px;
border-color:#CCC; 
border-radius:10px;">
Hello
</div>

Can anybody help me to solve this error.

jsFiddle: http://jsfiddle.net/9XFDp/1/

Upvotes: 7

Views: 2794

Answers (2)

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

DEMO

CSS

.title{
border:solid 1px #CCC; 
margin: 15px 0px 0px 350px; 
border-bottom:1px solid #ffffff; 
padding:12px 12px 8px 12px; 
border-radius:5px 5px 0px 0px; 
width:300px; 
text-align:center;
    font-size:18px; color:#000
        font-weight:bold;
position:relative;
    top:1px;    
}
.content{
    width:968px; 
float:left; 
margin:0px 15px 15px 15px; 
border: solid 1px;
border-color:#CCC; 
border-radius:10px;
}

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

Just nudge the top div by 1px from top and use some background-color or even border-bottom is fine

Demo

Added the below properties to the header div

position: relative;
top: 1px; 
background: #fff; 
z-index: 1;

Note: Don't use inline CSS, create classes instead.

Demo 2 (Without using background-color, used border-bottom: 1px solid #fff; instead)

Upvotes: 5

Related Questions