No Time Dad

A blog about web development written by a busy dad

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: HeaderPlain Breaking it into 3 boxes: HeaderBoxes

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

Full-time
Remote
$120k
Closing Jan 9, 2020

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

Full-time
Remote
$120k
Closing Jan 9, 2020

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

Full-time
Remote
$120k
Closing Jan 9, 2020

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

Full-time
Remote
$120k
Closing Jan 9, 2020

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.