It Is NOT That Hard To Align Your HTML/CSS Elements [A How-To Guide]

If you are reading this article means that you know how much it hurts to be a newbie at web design, we all have been there fella.

They say love comes through the eyes, and trust me, nobody will love your webpage if the harmony of a well-aligned layout is not the first thing they see when they open your hard-worked design.

First things first, this is the article I would love to have seen on the first days of my HTML/CSS course, so as you might be thinking I'll be focusing on helping my new comrades that are starting their career as a web developer.

So, getting to the point let me list the tips that cost me hours of pain and frustration so you guys can postpone, it is a necessary step on this world, that feeling a little more time:

1- Get the big picture of your design

Before you even add your first <h1>, give some time to create the puzzle you are about to create.

I would recommend you better start watching webpages as a big grid, everything you see can be transformed into rows and columns if you pay enough attention.

Even grabbing some paper and a pen to make a sketch of what you want is a nice old fashioned but reliable option, don't worry about the content, just create a bunch of squares and rectangles that you will find out how to fill after.

Now that you have that sketch, create as much <div>'s as you desire.

2- Define your margin

You would like to have some elements stretch the whole viewport, such as your header or the fancy navbar you will create, but remember to make your viewers' life easier so they can read your content with the less effort possible.

One way to achieve this is to define a general margin class so your elements will have their own well-defined space.

ie:

.mr {
  margin-right: 0.25rem;
}

.ml {
  margin-left: 0.25rem;
}

.mt {
  margin-top: 0.25rem;
}

.mb {
  margin-bottom: 0.25rem;
}

.m-x {
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}

.m-y {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

The same goes for padding, you can play with the numbers, obviously.

3- The holy grail of the web design layout: Flexbox

If this is the first time you heard about it, you better stop everything and read this amazing guide of CSS tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Now that we are on the same channel, now you can create a responsive grid design.

A very efficient way of doing this is to create some more general classes for the flex attributes

Set your element as a flex row container:

.flex-row {
  display: flex;
}

or make it a flex column:

.flex-column {
  display: flex;
  flex-direction: column;
}

Now you are able to create the bunch of squares and rectangles you sketched before.

I would love to go deeper on the flexbox topic, but it's up to you to define your awesome and handy modifier classes using the diverse options that you might find on the link I shared above.

4- The strongest tool to align an item, the duo relative-absolute

For the picky details of your page, you can force the position of WHATEVER you want using this duo, something as small as an icon or as big as your <main>.

A really quick reminder, the relative element will be the reference for the absolute one, and every absolute element will take the closest relative element as their reference.

Knowing this, when you define which will be your relative element and will be the absolute that would be assigned to it, It's time to play with the numbers of the top, bottom, left and right attributes, since whenever you set an element to "position: absolute" it will ignore everything except their relative parent.

ie:

HTML:

<div class="relative">
</div>
<div class="absolute whatever-you-want">
</div>

or

<div class="relative">
  <div class="absolute whatever-you-want">
  </div>
</div>

As you can see, it does not matter if the absolute element is the child or not of the relative one, since like I said, it will ignore everything except the relative element.

adding CSS:

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.whatever-you-want {
  top: 2px;
  bottom: 10px;
  left: -15px;
  right: 12px;
}

The top, bottom, left and right attributes of the absolute elements take the reference of the top, bottom, left and right border of the relative element.

A positive number will take the element away from the border, according to the axis it is working, and a negative number will take it closer to it, considering that 0 means it will be placed over that border.

So, in this particular absolute element, it will be something like this:

- top: 2px; means that it will take the element 2 pixels away from the top border of the relative element, so it will be moved 2 pixels in direction of the bottom border.

- bottom: 10px; means that it will take the element 10 pixels away from the bottom border of the relative element, so it will be moved 10 pixels in direction of the top border.

- left: -15px; means that it will take the element 15 pixels closer from the left border of the relative element, so it will be moved 15 pixels in direction of the left border outside the box-model of the relative element, since 0 was placed over that border.

- right: 12px; means that it will take the element 12 pixels away from the right border of the relative element, so it will be moved 12 pixels in direction of the left border.

Keep in mind that this option it's like a two-sided sword, I recommend it is only used for tiny details of your page, but you will know what you can do with practicing it.

That might be all for now, it's time to fill those <div>'s.

Cheers, Raul.