CSS Apprentice CSS Apprentice - 4 months ago 17
HTML Question

How To Add Bottom Border When Overflow Is Hidden?

How To Add Bottom Border When Overflow Is Hidden?

I'm using the

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: '';
}

Answer

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;
}
Comments