CSS boxes layout - html

Question

I am trying to create boxes next to each other but I am not sure what I am missing or getting wrong?
I have tried border attributes but it seems not working properly, and I would like the vertical lines to be attached to the horizontal lines and the content of the boxes be equally disposed like showed in the screenshot from Balenciaga website.
Balenciaga Website Footer
* {
box-sizing: border-box;
color: #000;
margin: inherit;
}
html {
background-color: #dee1ec;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
body {}
a {
text-decoration: none;
}
.header {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.christianmeloni {
display: inline-block;
padding-left: 12px;
}
.menu {
display: inline-block;
float: right;
padding-right: 12px;
}
.work:hover,
.about:hover,
.contact:hover {
text-decoration: underline;
}
.content {
margin-bottom: 12px;
margin-top: 12px;
padding-left: 12px;
padding-right: 12px;
}
.mission {}
.band {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 22px;
padding-top: 22px;
}
.brand {
border-right: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-right: 12px;
width: 20%;
}
.experience {
border-right: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.innovation {
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.engagement {
border-left: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.strategy {
border-left: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
width: 20%;
}
.footer {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.credit {
display: inline-block;
padding-left: 12px;
}
.follow {
display: inline-block;
float: right;
padding-right: 12px;
}
.credit:hover,
.facebook:hover,
.twitter:hover,
.instagram:hover {
text-decoration: underline;
}
<header class="header">
<div class="christianmeloni">
<span>
CHRISTIAN MELONI
</span>
</div>
<div class="menu">
<span>
<a class="work" href="#">Work</a>
<a class="about" href="#">About</a>
<a class="contact" href="#">Contact</a>
</span>
</div>
</header>
<div class="content">
<div class="mission">
<div>
Transforming businesses by developing original products, services and experiences. Disruptive thinking for ambitious brands. Challenge the ordinary, to achieve the extraordinary. We’re always in motion.
</div>
<div>
Our experience is that working collaboratively produces the best results.
</div>
<div>
Known for a collaborative, problem-solving approach to design, with personal involvement by all principals in every project and continuous attention to the details. We’re a global brand and innovation consultancy. We help ambitious leaders define compelling
brand strategies, design powerful brand experiences and innovate new brand-led products and services. We challenge ourselves and our clients to push boundaries. We are a design and innovation company. We work with forward-looking companies to shape
modern brands for a purpose-driven future. Founded with a simple but compelling vision: to build a brand consultancy as strong in its strategic thinking as it was in its creativity. We can’t help but tell it how it is. We know the rules and know
when and how to break them. We have firm beliefs, big ideas, strong convictions. We look inside for ideas and outside for inspiration. We like to challenge and be challenged, to teach and be taught. We take our craft seriously – ourselves less so.
We play music by ear, we follow our intuition. This is our nature, our essence. We have a strong ‘one-office’ philosophy and operating model. Our global team of strategists, designers and programme managers work as one coherent team across our different
locations in order to bring the best of our knowledge, skills and experience to every one of our clients wherever they are in the world. We come from many different places, speak many different languages and bring diverse skills and perspectives.
But we operate as one office, bringing the best regardless of where we (or you) are.
</div>
</div>
</div>
<div class="band"></div>
<div class="content">
<div class="brand">
<div>
BRAND
</div>
<div>
Disruptive thinking starts with a great story. We help leaders discover and define the most powerful and authentic brand narrative that will inspire their people, engage their customers and disrupt their markets. We help them develop a concise set of
bold and innovative initiatives that challenge the status quo and make the brand vision a reality.
</div>
</div>
<div class="experience">
<div>
EXPERIENCE
</div>
<div>
Disruptive thinking delivers great customer experiences. We design powerful, creative and engaging brand experiences, online and offline, that challenge people to think, feel and behave differently towards the brand and turn passive customers into passionate
brand advocates.
</div>
</div>
<div class="innovation">
<div>
INNOVATION
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class="engagement">
<div>
ENGAGEMENT
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class="strategy">
<div>
STRATEGY
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
</div>
<footer class="footer">
<div class="credit">
<span>
© 2017 Christian Meloni
</span>
</div>
<div class="follow">
<span>
<a class="facebook" href="https://www.facebook.com/christianmelonicom/">Facebook</a>
<a class="twitter" href="#">Twitter</a>
<a class="instagram" href="#">Instagram</a>
</span>
</div>
</footer>

Answer 1

Instead of relying on display: inline-block, which causes items to be aligned by the base line, you can use CSS flexbox instead. The advantage of using flexbox is that each item will be stretched to its parent container's height (no more ugly equal height hacks), and it is just extremely easy to implement:
.content {
padding-left: 12px;
padding-right: 12px;
display: flex; // This is what you really need
}
// This is just to give the individual columns sufficient space at the top and bottom
.content > div {
padding-top: 12px;
padding-bottom: 12px;
}
And simply remove all the min-height and display: inline-block from the direct descendants of the <div class="content"> element, and you are good to go.
See proof-of-concept below:
* {
box-sizing: border-box;
color: #000;
margin: inherit;
}
html {
background-color: #dee1ec;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
body {
}
a {
text-decoration: none;
}
.header {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.christianmeloni {
display: inline-block;
padding-left: 12px;
}
.menu {
display: inline-block;
float: right;
padding-right: 12px;
}
.work:hover, .about:hover, .contact:hover {
text-decoration: underline;
}
.content {
padding-left: 12px;
padding-right: 12px;
display: flex;
}
.content > div {
padding-top: 12px;
padding-bottom: 12px;
}
.band {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 22px;
padding-top: 22px;
}
.brand {
border-right: 1px solid #000;
padding-right: 12px;
width: 20%;
}
.experience {
border-right: 1px solid #000;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.innovation{
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.engagement{
border-left: 1px solid #000;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.strategy{
border-left: 1px solid #000;
padding-left: 12px;
width: 20%;
}
.footer {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.credit {
display: inline-block;
padding-left: 12px;
}
.follow {
display: inline-block;
float: right;
padding-right: 12px;
}
.credit:hover, .facebook:hover, .twitter:hover, .instagram:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Christian Meloni</title>
<link href="christianmeloni.css" rel="stylesheet">
<link href="christianmeloni.ico" rel="icon">
</head>
<body>
<header class="header">
<div class="christianmeloni">
<span>
CHRISTIAN MELONI
</span>
</div>
<div class="menu">
<span>
<a class="work" href="#">Work</a>
<a class="about" href="#">About</a>
<a class="contact" href="#">Contact</a>
</span>
</div>
</header>
<div class="content">
<div class="mission">
<div>
Transforming businesses by developing original products, services and experiences.
Disruptive thinking for ambitious brands.
Challenge the ordinary, to achieve the extraordinary.
We’re always in motion.
</div>
<div>
Our experience is that working collaboratively produces the best results.
</div>
<div>
Known for a collaborative, problem-solving approach to design, with personal involvement by all principals in every project and continuous attention to the details.
We’re a global brand and innovation consultancy.
We help ambitious leaders define compelling brand strategies, design powerful brand experiences and innovate new brand-led products and services.
We challenge ourselves and our clients to push boundaries.
We are a design and innovation company. We work with forward-looking companies to shape modern brands for a purpose-driven future.
Founded with a simple but compelling vision: to build a brand consultancy as strong in its strategic thinking as it was in its creativity.
We can’t help but tell it how it is. We know the rules and know when and how to break them. We have firm beliefs, big ideas, strong convictions. We look inside for ideas and outside for inspiration. We like to challenge and be challenged, to teach and be taught. We take our craft seriously – ourselves less so. We play music by ear, we follow our intuition.
This is our nature, our essence.
We have a strong ‘one-office’ philosophy and operating model. Our global team of strategists, designers and programme managers work as one coherent team across our different locations in order to bring the best of our knowledge, skills and experience to every one of our clients wherever they are in the world.
We come from many different places, speak many different languages and bring diverse skills and perspectives. But we operate as one office, bringing the best regardless of where we (or you) are.
</div>
</div>
</div>
<div class="band"></div>
<div class="content">
<div class="brand">
<div>
BRAND
</div>
<div>
Disruptive thinking starts with a great story. We help leaders discover and define the most powerful and authentic brand narrative that will inspire their people, engage their customers and disrupt their markets. We help them develop a concise set of bold and innovative initiatives that challenge the status quo and make the brand vision a reality.
</div>
</div>
<div class="experience">
<div>
EXPERIENCE
</div>
<div>
Disruptive thinking delivers great customer experiences. We design powerful, creative and engaging brand experiences, online and offline, that challenge people to think, feel and behave differently towards the brand and turn passive customers into passionate brand advocates.
</div>
</div>
<div class="innovation">
<div>
INNOVATION
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably successful.
The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile.
We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class="engagement">
<div>
ENGAGEMENT
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably successful.
The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile.
We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class="strategy">
<div>
STRATEGY
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably successful.
The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile.
We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
</div>
<footer class="footer">
<div class="credit">
<span>
© 2017 Christian Meloni
</span>
</div>
<div class="follow">
<span>
<a class="facebook" href="https://www.facebook.com/christianmelonicom/">Facebook</a>
<a class="twitter" href="#">Twitter</a>
<a class="instagram" href="#">Instagram</a>
</span>
</div>
</footer>
</body>
</html>

Answer 2

I edited your snipet.
I used display: flex; on .content
Removed margin and padding to ad them on boxes (.subContent)
* {
box-sizing: border-box;
color: #000;
margin: inherit;
}
html {
background-color: #dee1ec;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
body {}
a {
text-decoration: none;
}
.header {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.christianmeloni {
display: inline-block;
padding-left: 12px;
}
.menu {
display: inline-block;
float: right;
padding-right: 12px;
}
.work:hover,
.about:hover,
.contact:hover {
text-decoration: underline;
}
.content {
margin-bottom: 12px;
margin-top: 12px;
padding-left: 12px;
padding-right: 12px;
}
.mission {}
.band {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 22px;
padding-top: 22px;
}
.brand {
border-right: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-right: 12px;
width: 20%;
}
.experience {
border-right: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.innovation {
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.engagement {
border-left: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.strategy {
border-left: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
width: 20%;
}
.footer {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.credit {
display: inline-block;
padding-left: 12px;
}
.follow {
display: inline-block;
float: right;
padding-right: 12px;
}
.credit:hover,
.facebook:hover,
.twitter:hover,
.instagram:hover {
text-decoration: underline;
}
.content {
margin: 0;
padding: 0;
display: flex;
}
.subContent {
padding : 12px;
}
<header class="header">
<div class="christianmeloni">
<span>
CHRISTIAN MELONI
</span>
</div>
<div class="menu">
<span>
<a class="work" href="#">Work</a>
<a class="about" href="#">About</a>
<a class="contact" href="#">Contact</a>
</span>
</div>
</header>
<div class="content">
<div class="subContent mission">
<div>
Transforming businesses by developing original products, services and experiences. Disruptive thinking for ambitious brands. Challenge the ordinary, to achieve the extraordinary. We’re always in motion.
</div>
<div>
Our experience is that working collaboratively produces the best results.
</div>
<div>
Known for a collaborative, problem-solving approach to design, with personal involvement by all principals in every project and continuous attention to the details. We’re a global brand and innovation consultancy. We help ambitious leaders define compelling
brand strategies, design powerful brand experiences and innovate new brand-led products and services. We challenge ourselves and our clients to push boundaries. We are a design and innovation company. We work with forward-looking companies to shape
modern brands for a purpose-driven future. Founded with a simple but compelling vision: to build a brand consultancy as strong in its strategic thinking as it was in its creativity. We can’t help but tell it how it is. We know the rules and know
when and how to break them. We have firm beliefs, big ideas, strong convictions. We look inside for ideas and outside for inspiration. We like to challenge and be challenged, to teach and be taught. We take our craft seriously – ourselves less so.
We play music by ear, we follow our intuition. This is our nature, our essence. We have a strong ‘one-office’ philosophy and operating model. Our global team of strategists, designers and programme managers work as one coherent team across our different
locations in order to bring the best of our knowledge, skills and experience to every one of our clients wherever they are in the world. We come from many different places, speak many different languages and bring diverse skills and perspectives.
But we operate as one office, bringing the best regardless of where we (or you) are.
</div>
</div>
</div>
<div class="band"></div>
<div class="content">
<div class="subContent brand">
<div>
BRAND
</div>
<div>
Disruptive thinking starts with a great story. We help leaders discover and define the most powerful and authentic brand narrative that will inspire their people, engage their customers and disrupt their markets. We help them develop a concise set of
bold and innovative initiatives that challenge the status quo and make the brand vision a reality.
</div>
</div>
<div class="subContent experience">
<div>
EXPERIENCE
</div>
<div>
Disruptive thinking delivers great customer experiences. We design powerful, creative and engaging brand experiences, online and offline, that challenge people to think, feel and behave differently towards the brand and turn passive customers into passionate
brand advocates.
</div>
</div>
<div class="subContent innovation">
<div>
INNOVATION
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class="subContent engagement">
<div>
ENGAGEMENT
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class="subContent strategy">
<div>
STRATEGY
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
</div>
<footer class="footer">
<div class="credit">
<span>
© 2017 Christian Meloni
</span>
</div>
<div class="follow">
<span>
<a class="facebook" href="https://www.facebook.com/christianmelonicom/">Facebook</a>
<a class="twitter" href="#">Twitter</a>
<a class="instagram" href="#">Instagram</a>
</span>
</div>
</footer>