user3806549 user3806549 - 1 month ago 4
CSS Question

Creating a cabinet using CSS

I have found this codepen with a cabinet.

I could really use it for my site, but when I try to add two shelves, the bottom 2 shelves are outside the cabinet. When playing around with the height of the cabinet, the shelves just shrink/grow but the bottom 2 shelves remain outside the cabinet.

I tried adding borders to the bottom shelves, but that was even worse.

I tried making a cabinet with only 2 shelves but then you would get this ugly brown square at the bottom.

Why am I seeing all these issues?



.cabinet {
position: absolute;
width: 460px;
height: 500px;
background-color: #45221c;
top: 40px;
left: 30%;
border: 10px solid #69342b;
box-sizing: border-box;
}
.cabinet .cabinet-top {
width: 104%;
height: 0;
border-bottom: 10px solid #572b23;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
box-sizing: border-box;
top: -20px;
left: -2%;
position: absolute;
}
.cabinet .shelf {
position: relative;
width: 100%;
height: 20%;
box-sizing: border-box;
}
.cabinet .shelf .back {
position: absolute;
top: 0;
left: 2%;
width: 96%;
height: 100%;
background: #2c1512;
box-shadow: inset 10px 15px 15px #21100d;
}
.cabinet .shelf .base {
width: 100%;
height: 0;
border-bottom: 20px solid #331915;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
box-sizing: border-box;
bottom: 10px;
position: absolute;
}
.cabinet .shelf .front {
width: 100%;
height: 10px;
background-color: #69342b;
position: absolute;
bottom: 0;
}

<div class="cabinet">
<div class="cabinet-top"></div>

<div class="shelf">
<div class="upper-left-triangle"></div>
<div class="upper-right-triangle"></div>

<div class="back"></div>
<div class="base"></div>
<div class="front"></div>
</div>
<div class="shelf">
<div class="upper-left-triangle"></div>
<div class="upper-right-triangle"></div>

<div class="back"></div>
<div class="base"></div>
<div class="front"></div>

</div>
<div class="shelf">
<div class="upper-left-triangle"></div>
<div class="upper-right-triangle"></div>
<div class="back"></div>
<div class="base"></div>
<div class="front"></div>
</div>
<div class="shelf">
<div class="upper-left-triangle"></div>
<div class="upper-right-triangle"></div>
<div class="back"></div>
<div class="base"></div>
<div class="front"></div>
</div>
<div class="shelf">
<div class="upper-left-triangle"></div>
<div class="upper-right-triangle"></div>
<div class="back"></div>
<div class="base"></div>
<div class="front"></div>
</div>

<div class="shelf">
<div class="upper-left-triangle"></div>
<div class="upper-right-triangle"></div>
<div class="back"></div>
<div class="base"></div>
<div class="front"></div>
</div>

<div class="shelf">
<div class="upper-left-triangle"></div>
<div class="upper-right-triangle"></div>
<div class="back"></div>
<div class="base"></div>
<div class="front"></div>
</div>
</div>





CODEPEN:

http://codepen.io/cogitatio/pen/dpword?editors=1100

Answer

The problem is because the shelves' height are percentages - relative to the overall height of the cabinet. The percentages of the current shelves add up to 100% and by adding more shelves the percentage goes over 100% and so you see the extra ones at the bottom.

I changed the height of the shelves to 14.5%

http://codepen.io/anon/pen/vXvOpV?editors=1100

.cabinet .shelf {
  position: relative;
  width: 100%;
  height: 14.5%;
  box-sizing: border-box;
}
Comments