CODEWITHSUNDEEP
cssborder
M4N
M4N

Reputation: 96571

Collapse borders of nested DIVs

I have a problem styling nested DIVs (see here for an example).

I have some nested DIVs (with class="box") which are dynamically rendered, e.g:

<div class="box" id="1">
  other content
  <div class="box" id="2">
    <div class="box" id="3">
    </div>
  </div>
  other content
  <div class="box" id="4">
  </div>
</div>
other content

I'd like these DIVs to have a border at the bottom:

<style>
div.box {border-bottom: solid 1px gray;}
</style>

The problem is, when the bottom border of two nested DIVs are adjacent (e.g. box 2 and 3 or box 1 and 4), then the result is a gray line of 2 (or more pixels) height.

Is it possible to collapse the borders of nested DIVs, if they are adjacent?

I tried adding border-collapse: collapse, but that didn't help.

Upvotes: 4

Views: 14541

Answers (4)

UtherTG
UtherTG

Reputation: 192

There is many ways to do that:

1) Make your divs behave like table\table-cell elements.

HTML

<div class="wrapper2">
    <div class="row"></div>
    <div class="row"></div>
</div>

SCSS

.wrapper2 {
    display: table; border-collapse: collapse; margin-bottom: 15px;
    .row {
        width: 200px; height: 100px; background: green; border: 1px solid red; display: table-cell;    
    }
}

2) Just select div you need and remove border from one side

HTML

<div class="wrapper">
    <div class="row"></div>
    <div class="row"></div>
    <div class="clearfix"></div>
</div>

SCSS

.wrapper {
    width: 404px; margin-bottom: 15px;
    .row {
        width: 200px; height: 100px; background: green; border: 1px solid red; float: right;
        &:first-child { border-left: 0; }
    }
    .clearfix { clear: both; }
}

3) Overlap divs

HTML

<div class="wrapper3">
    <div class="row"></div>
    <div class="row move-left"></div>
    <div class="clearfix"></div>
</div>

SCSS

.wrapper3 {
    width: 404px; margin-bottom: 15px;
    .row {
        position: relative; width: 200px; height: 100px; background: green; border: 1px solid red; float: left;
        &.move-left { left: -1px }
    }
    .clearfix { clear: both; }
}

All 3 examples on jsfiddle

Just pick something that till fit your project

Upvotes: 0

demonofthemist
demonofthemist

Reputation: 4199

css property border-collapse works only with tables...

If you are using div then you can use :last-child selector of css3 to desable border on last .box element

e.g.

box .box:last-child{border:none;}

Upvotes: 0

Tom Spee
Tom Spee

Reputation: 9269

The border collapse doesn't work, I got it working with your JsFiddle but you probably have to change it because you're DIVs are dynamically created.

div.box > div.box {
    border-bottom: solid 1px gray;
}

div.box > div.box > div.box:last-child {
    border-bottom: none;
}

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99484

border-collapse property is only applicable to table and inline-table elements.

Try adding margin-bottom property to .box elements with a negative value to overlap the borders as follows:

Example Here

div.box {
    border-bottom: solid 1px gray;
    margin-bottom: -1px;
}

Upvotes: 11

Related Questions