CODEWITHSUNDEEP
htmlcssposition
Will
Will

Reputation: 211

Omit the border between two divs

I have two divs, and I want them to "look like" surrounded by same border. can anyone help me solving this problem?

I would like it to look like

 _____
|top  |
|     |__
|bottom  |
|        |
 ─────────

PS. the way I tried is to add border-bottom : white in ``#top` div.

However, it becomes more complicated because the #bottom div I need it style to include position: absolute yet the #top div not have position: absolute.

Here is the html.

<div id='top'>
   top
</div>
<div id='bottom'>
   bottom
</div>

Here is the css

#top{
    width : 100px;
    height : 100px;
    border : solid 1px black;
    border-bottom : solid 3px white;
    position : relative;
    z-index : 1000;
}

#bottom{
    width : 200px;
    height : 200px;
    border : solid 1px black;
    position : absolute;
}

Here is jsfiddle if you need

http://jsfiddle.net/willHsu/T3bLq/

thanks for your help!

Upvotes: 1

Views: 236

Answers (3)

Mr Lister
Mr Lister

Reputation: 46569

Working from Milkmannetje's solution, you can give the bottom div a top margin of 100 pixels instead of an absolute position.
Because of margin collapsing, the top one then ends up in the same place as the bottom one, so I had to move the top one up by 100 pixels.

#top{
    width : 100px;
    height : 100px;
    border : solid 1px black;
    border-bottom : none;
    position : absolute;
    top:-100px;
    background:#FFF;
}

#bottom{
    width : 200px;
    height : 200px;
    border : solid 1px black;
    margin-top:108px;
}

http://jsfiddle.net/MrLister/T3bLq/4/

Alternatively, if you don't want to use position: absolute at all, you can give the top one display:relative (because that is to only way to position it higher in the Z-index) and use margin-top: -1px for the bottom one.

http://jsfiddle.net/MrLister/T3bLq/7/

Or, another approach, if you want to avoid position altogether, is to switch the divs around in the source. That will also make the top one be displayed on top of the bottom one, without relying on the Z-index. then give the bottom one a large top margin, and the top one a large negative top margin to get them back in the same place on the screen again.

http://jsfiddle.net/MrLister/T3bLq/8/

I would not recommend this course of action though; it's confusing. Use something like this only as a last resort.

Upvotes: 1

sagix
sagix

Reputation: 660

Another solution, try with before selector:

#top {
    width : 100px;
    height : 100px;
    border : solid 1px black;
    border-bottom : none;
    background:#FFF;
}
#bottom {
    width: 200px;
    height: 200px;
    border: solid 1px black;
    border-top: none;
}
#bottom:before{
    content: "";
    display:block;
    margin-left: 100px;
    border-top: solid 1px black;
}

http://jsfiddle.net/sagix/vTyeS/

Upvotes: 1

Milkmannetje
Milkmannetje

Reputation: 1182

Just let them overlap for a bit. Something like this: http://jsfiddle.net/T3bLq/2/

.box {
position: relative;
}

#top{
width : 100px;
height : 100px;
border : solid 1px black;
border-bottom : solid 3px white;
position : absolute;
z-index : 1000;
}

#bottom{
top: 102px;
width : 200px;
height : 200px;
border : solid 1px black;
position : absolute;
}


<div class="box">
<div id='top'>
    top
</div>
<div id='bottom'>
    bottom
</div>

Upvotes: 2

Related Questions