How To Add Bottom Border When Overflow Is Hidden?

Question

How To Add Bottom Border When Overflow Is Hidden?

I'm using the margin-bottom: -10000px; padding-bottom: 10000px; trick/hack to have divs fill their parent container while keeping everything % based. The only problem, the overflow hides the bottom border.

jsFiddle http://jsfiddle.net/CSS_Apprentice/0Lkxw1je/1/

I'm trying to use :after to add the bottom border, but no matter what I do to the :after selector (position: absolute, overflow: visible), I can't get the border to show

body {
    width: 100%
}

.container {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.box {
    display: inline-block;
    width: 25%;
    height: 100%;
    border: 3px solid black;
    padding: 2%;
    vertical-align: top;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

.box:after {
    border-bottom: 3px solid black;
    content: '';
}

Try display: table-cell; in .box class instead of margin-bottom: -10000px; padding-bottom: 10000px; — HaveNoDisplayName, Nov 19 '14 at 01:04
It worked, but according to this post: http://stackoverflow.com/questions/15939896/css-inline-block-vs-table-cell "display:table-cell is intended for use inside a display:table-row, itself inside a display:table. Improper use will result in anonymous elements being created, which may interefere negatively with other aspects of your layout." — CSS Apprentice, Nov 19 '14 at 01:42

score 2 · Accepted Answer · answered Nov 19 '14 at 01:51

Try This updated css, with display: table; & display:table-row:-

body {
    width: 100%;
    display: table;

}

.container {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    display: table-row;

}

.box {
    display: inline-block;
    width: 25%;
    height: 100%;
    border: 3px solid black;
    padding: 2%;
    vertical-align: top;
    display: table-cell;
}

.box:after {
    border-bottom: 3px solid black;
    content: '';
}

.remainder {
    height: 100%;
}

h1 {
    background-color: #fff;
    border: 3px solid black;
}
/* Colors */
.blue {
    background-color: blue;
}
.green{
    background-color: green;
}
.yellow{
    background-color: yellow;
}
.red{
    background-color: red;
}

score 0 · Answer 2 · edited Jul 21 '16 at 08:15

0

What worked for me was to create an outer div with a border and without overflow:hidden. The outer box will have the border and the content of the inner will be overflow.

edited Jul 21 '16 at 08:15

Draken

3,134
13
34
54

answered Jul 21 '16 at 07:56

Nils Langner

313
2
9

How To Add Bottom Border When Overflow Is Hidden?

2 Answers2