A Trick for Helping Visualize and Implement Layouts
February 22, 2021
Intro
I am pretty sure that this technique is probably just new to me, but maybe someone else will be having similar struggles and find it new to them as well. Basically, I was having a hard time visualizing how to align and layout elements on a page and discovered that if I just put things into boxes and apply a background-color
style to the box then it is so much easier to align and layout the elements. I have seen many CSS tutorial sites doing this and it seems simple enough, but I think where I get tripped up is when the box itself has child elements that require their own styles.
For example, the Tailwind UI header component pictured below can really be thought of as 3 boxes, but clearly there are more than 3 elements on the page:
Breaking it into 3 boxes:
Trying It Out
Here we will implement a watered-down version of the header pictured above. I’ll drop each section into their own box. Here is the example code:
<html>
<style>
body {
padding: 0;
margin: 0;
}
h1 {
padding: 0;
margin: 0;
}
.header-container {
background-color: blue;
padding: 1rem;
}
.items-container {
background-color: red;
padding: 1rem;
}
.buttons-container {
background-color: green;
padding: 1rem;
}
</style>
<body>
<header>
<div class="header-container">
<h1>Backend Developer</h1>
</div>
<div class="items-container">
<div>Full-time</div>
<div>Remote</div>
<div>$120k</div>
<div>Closing Jan 9, 2020</div>
</div>
<div class="buttons-container">
<button>Edit</button>
<button>View</button>
</div>
</header>
</body>
</html>
Which results in a page that looks like this:
Backend Developer
But we want the items in the red box to be in a row and not a column. So we’ll add display: flex
to the items-container
css class. The red box as a whole will stay the same. It is still the reb box element but now with its contents shown in a row (we can deal with the spacing between the items in the box later).
Backend Developer
Things are going to get interesting here. Now we want to put the green box to the right of both the blue box and the red box. You might be tempted to try align the green box by leaving the blue and red box as separate elements, but I think that would be a mistake…a mistake I’ve made quite a few times.
What I’d suggest instead is to create a new box that contains the blue and red box box, then align the green box to the right of that element. You can do this by creating a new container div
around the blue and red box elements. Your html will now look something like the below (note the new div with the header-left-container
class).
<html>
<style>
body {
padding: 0;
margin: 0;
}
h1 {
padding: 0;
margin: 0;
}
.header-container {
/* background-color: blue; */
padding: 1rem;
}
.items-container {
/* background-color: red; */
padding: 1rem;
display: flex;
}
.buttons-container {
background-color: green;
padding: 1rem;
}
.header-left-container {
background-color: blueviolet;
}
</style>
<body>
<header>
<div class="header-left-container">
<div class="header-container">
<h1>Backend Developer</h1>
</div>
<div class="items-container">
<div>Full-time</div>
<div>Remote</div>
<div>$120k</div>
<div>Closing Jan 9, 2020</div>
</div>
</div>
<div class="buttons-container">
<button>Edit</button>
<button>View</button>
</div>
</header>
</body>
</html>
Note that I commented out the background-color: blue;
and background-color: red;
on the header-left-container
elements so it is easier to see that they are now children of the new parent element. The page should now look something like the below.
Backend Developer
Now we only have two items to deal with, which is much more straight-forward than dealing with three. Conveniently, both of our boxes (header-left-container
and buttons-container
) are siblings in the header
tag. So to line them up in a row, we simply add display: flex
to the header
. We’ll add a new style to the header with header { display: flex };
in our styles
tag. Note that the html will stay the same.
<html>
<style>
body {
padding: 0;
margin: 0;
}
h1 {
padding: 0;
margin: 0;
}
/* New style that aligns the siblings in a row! */
header {
display: flex;
}
.header-container {
/* background-color: blue; */
padding: 1rem;
}
.items-container {
/* background-color: red; */
padding: 1rem;
display: flex;
}
.buttons-container {
background-color: green;
padding: 1rem;
}
.header-left-container {
background-color: blueviolet;
}
</style>
<body>
<header>
<div class="header-left-container">
<div class="header-container">
<h1>Backend Developer</h1>
</div>
<div class="items-container">
<div>Full-time</div>
<div>Remote</div>
<div>$120k</div>
<div>Closing Jan 9, 2020</div>
</div>
</div>
<div class="buttons-container">
<button>Edit</button>
<button>View</button>
</div>
</header>
</body>
</html>
The last thing we want to do here is push the green box to the right and center the items in the green box horizontally. We can do this by adding align-items: center;
to the header
style and adding the semi-magical margin-left: auto;
to the buttons-container
style. We’ll also remove the background-color
from the boxes. Your updated and sort-of-final html looks like the below.
<html>
<style>
body {
padding: 0;
margin: 0;
}
header {
display: flex;
align-items: center;
}
h1 {
padding: 0;
margin: 0;
}
.header-container {
/* background-color: blue; */
padding: 1rem;
}
.items-container {
/* background-color: red; */
padding: 1rem;
display: flex;
}
.buttons-container {
/* background-color: green; */
padding: 1rem;
margin-left: auto;
}
.header-left-container {
/* background-color: blueviolet; */
}
</style>
<body>
<header>
<div class="header-left-container">
<div class="header-container">
<h1>Backend Developer</h1>
</div>
<div class="items-container">
<div>Full-time</div>
<div>Remote</div>
<div>$120k</div>
<div>Closing Jan 9, 2020</div>
</div>
</div>
<div class="buttons-container">
<button>Edit</button>
<button>View</button>
</div>
</header>
</body>
</html>
Backend Developer
Obviously, there is a bit more work to do to get it looking semi-presentable and even responsive but now you have a good foundation to work from. The header-left-container
is a little redundant at this point but we might add more styles to it in the future so I left it in.
Looking at groups of elements as boxes and even giving them a background-color
has been really helpful. I find that I sometimes trick myself into thinking a layout is more complex than it really is, but if I remember to sort of zoom out and see the groups of elements as just boxes on a page, then I have an easier time getting them to lay out on the page as I would like them to.