Weird spacing at bottom of boxes in Pure CSS Masonry layout? - html

Question

I have a problem with Pure CSS Mansonry layout. I use position: relative for the boxes and position: absolute for the content inside each box. However, I noticed that when I use position: absolute, there's an gap under each box. I couldn't figure out how to fix it. You can also check it out at this codepen: http://codepen.io/kikibres/pen/KWjXeG
HTML
#import "compass/css3";
*, *:before, *:after {box-sizing: border-box !important;}
.servicogallery {
-moz-column-gap: 0;
-webkit-column-gap: 0;
-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;
position: relative;
display: block;
width: 100%;
}
#services {
display: inline-block;
margin: 0;
padding: 1rem;
width: 100%;
height: 250px;
position: relative;
}
#services span {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
vertical-align: bottom;
}
.a1 {
background-color: #0026e7;
color: #FFF;
}
.a2 {
background-color:/*#189ed8*/#ffffff;
color: /*#FFF*/#998b75;
}
.a3 {
background-color:/*#fff*/#bac0b8;
color: /*#998b75*/#ffffff;
}
.a4 { background-color: #646664;
color: #FFF;
}
.a5 {background-color: #0026e7;
color: #FFF;
}
.a6 {background-color: #29a1e6;
color: #FFF;
}
.a7 {background-color: #fff;
color: #998b75;
}
.a8 {background-color: #bac0b8;
color: #FFF;
}
.a9 { background-color: #fff;
color: #998b75;
}
.a10 { background-color: #0029e5;
color: #FFF;
}
.a11 { background-color: #5e605e;
color: #FFF;
}
/* styles for background color, etc; not necessary for this thing to work */
body {
padding: 1em;
font-family: "Garamond", serif;
}
h1 {
font-size: 3rem;
font-weight: 800;
}
body {
line-height: 1.25;
}
p {
text-align: left;
}
<h1>Pure CSS Masonry</h1>
<p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p>
<div class="servicogallery">
<div id="services" class="a1">
<span>
<p>Formulación y Evaluación de Proyectos de Construcción.</p></span>
</div>
<div id="services" class="a2">
<span>
<p>Mantenimiento Varios (Edificaciones, Calles, entre otros).</p></span>
</div>
<div id="services" class="a3">
<span>
<p>Diseño: Arquitectónico, Habitacional, Industrial, Urbano y Comercial.</p></span>
</div>
<div id="services" class="a4">
<span>
<p>Taludes, Muros.</p></span>
</div>
<div id="services" class="a5">
<span>
<p>Supervisión de Proyectos</p></span>
</div>
<div id="services" class="a6">
<span>
<p>Estudios de Factibilidad Técnica – Económica de proyectos de construcción.</p></span>
</div>
<div id="services" class="a7">
<span>
<p>Diseño Integral de Obras de Ingeniería y Arquitectura.</p></span>
</div>
<div id="services" class="a8">
<span>
<p>Tramitología.</p></span>
</div>
<div id="services" class="a9">
<span>
<p>Obras de Mitigación</p></span>
</div>
<div id="services" class="a10">
<span>
<p><strong>Construcción de Obras Civiles y Remodelaciones:</strong></p>
<p>Centros comerciales, urbanizaciones, infraestructura: Hidráulica y Víal, complejos industriales, turísticos, deportivo, centros decapacitación, vivienda, centros educativo, hospitales, taludes, muros, obras de mitigación</p>
<p>Aplicación de pintura con maquinaria industrial avanzada, entre otros.</p></span>
</div>
<div id="services" class="a11">
<span>
<p>Uso de equipo para la realización de pruebas no destructivas en concreto.</p></span>
</div>
</div>
What I'm trying to achieve is no gaps around the boxes as well the content to be at bottom of each box. All I could tell is that the position: absolute is affecting the gaps.

Answer 1

Add vertical-align: top; to #services
#import "compass/css3";
*, *:before, *:after {box-sizing: border-box !important;}
.servicogallery {
-moz-column-gap: 0;
-webkit-column-gap: 0;
-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;
position: relative;
display: block;
width: 100%;
}
#services {
margin: 0;
padding: 1rem;
width: 100%;
height: 250px;
position: relative;
vertical-align: top;
display: inline-block;
}
#services span {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
vertical-align: bottom;
}
.a1 {
background-color: #0026e7;
color: #FFF;
}
.a2 {
background-color:/*#189ed8*/#ffffff;
color: /*#FFF*/#998b75;
}
.a3 {
background-color:/*#fff*/#bac0b8;
color: /*#998b75*/#ffffff;
}
.a4 { background-color: #646664;
color: #FFF;
}
.a5 {background-color: #0026e7;
color: #FFF;
}
.a6 {background-color: #29a1e6;
color: #FFF;
}
.a7 {background-color: #fff;
color: #998b75;
}
.a8 {background-color: #bac0b8;
color: #FFF;
}
.a9 { background-color: #fff;
color: #998b75;
}
.a10 { background-color: #0029e5;
color: #FFF;
}
.a11 { background-color: #5e605e;
color: #FFF;
}
/* styles for background color, etc; not necessary for this thing to work */
body {
padding: 1em;
font-family: "Garamond", serif;
}
h1 {
font-size: 3rem;
font-weight: 800;
}
body {
line-height: 1.25;
}
p {
text-align: left;
}
<h1>Pure CSS Masonry</h1>
<p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p>
<div class="servicogallery">
<div id="services" class="a1">
<span>
<p>Formulación y Evaluación de Proyectos de Construcción.</p></span>
</div>
<div id="services" class="a2">
<span>
<p>Mantenimiento Varios (Edificaciones, Calles, entre otros).</p></span>
</div>
<div id="services" class="a3">
<span>
<p>Diseño: Arquitectónico, Habitacional, Industrial, Urbano y Comercial.</p></span>
</div>
<div id="services" class="a4">
<span>
<p>Taludes, Muros.</p></span>
</div>
<div id="services" class="a5">
<span>
<p>Supervisión de Proyectos</p></span>
</div>
<div id="services" class="a6">
<span>
<p>Estudios de Factibilidad Técnica – Económica de proyectos de construcción.</p></span>
</div>
<div id="services" class="a7">
<span>
<p>Diseño Integral de Obras de Ingeniería y Arquitectura.</p></span>
</div>
<div id="services" class="a8">
<span>
<p>Tramitología.</p></span>
</div>
<div id="services" class="a9">
<span>
<p>Obras de Mitigación</p></span>
</div>
<div id="services" class="a10">
<span>
<p><strong>Construcción de Obras Civiles y Remodelaciones:</strong></p>
<p>Centros comerciales, urbanizaciones, infraestructura: Hidráulica y Víal, complejos industriales, turísticos, deportivo, centros decapacitación, vivienda, centros educativo, hospitales, taludes, muros, obras de mitigación</p>
<p>Aplicación de pintura con maquinaria industrial avanzada, entre otros.</p></span>
</div>
<div id="services" class="a11">
<span>
<p>Uso de equipo para la realización de pruebas no destructivas en concreto.</p></span>
</div>
</div>