Understanding layout positioning with CSS

Introduction

When working with CSS you will eventually run into designs that require you to rearrange the layout of your document to reach your design goals. When faced with such a task CSS provides us with various ways of doing this. In this article, we will cover some of those ways.

1. Positions:
The position property sets how an element is placed or positioned in our document. The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements. The position property also specifies the type of positioning method used for an element. It could either be static, relative, fixed, absolute or sticky.

HTML

<div class="ball"></div>

CSS

div.ball{
    border-radius: 50%;
    background-color: red;
    width: 100px;
    height: 100px;
}

Let us use the absolute position and give the top, left and right some values
CSS

    position: absolute;
    top: 100px;
    left: 100px;
    right: 100px;

Result





2. Margin:
Margins can simply be said to be the space outside of the elements border. It affects the surrounding space based on what values we set the margin property to.
Let us use the margin:
CSS

    margin-top: 100px;
    margin-right: 100px;
    margin-bottom: 100px;
    margin-left: 100px;

We could also write it as:
CSS

    margin: 100px;

    /* where top, right, bottom and left = 100px */

Result

3. Padding:
Paddings are the space inside or within an element. It controls the space within an element based on what values we set the padding property to.
Let us now try using the padding property:
CSS

    padding-top: 100px;
    padding-right: 100px;
    padding-bottom: 100px;
    padding-left: 100px;

We could also write it as:
CSS

    padding: 100px;

    /* where top, right, bottom and left = 100px */

Result

We should take note not to forget that the padding property is fundamentally different from the margin property so as to not mix them up.

4. Float:
The float property does what it says, it floats an element based on the value assigned to it.
Let us add the float property to the ball class and assign a value to it.
CSS

    float: right;

Result

Notable Mention
Center:
This is a depreciated and obsolete html tag. It centers all elements enclosed within its tags. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

HTML

 <center>
    <div class="ball"></div>
 </center>

Result

Conclusion

There are many other useful properties such as display, flex, grid etc..., but I will cover them in another article. For now, with this guide, I hope that I was able to further breakdown some of these concepts to your better understanding. Stay happy coding and see you in future posts.
You can find me on Twitter and Linkedin.

Comments

[Theo Philus]

🤙

[Adeyemo Tomisin Stephen]

Good work👍🏽

[Somtochukwu Okafor]

Thank you

[inspectorGadget]

Good work, simple and concise

[Somtochukwu Okafor]

Thank you

[Christopher Richardson]

thanks' to you, this article help me

[Somtochukwu Okafor]

I’m glad I could help

[Ayomide Olayiwola]

a nice summary

[Somtochukwu Okafor]

Thank you

[Oreodebs]

👏🏻👏🏻

[Mikael321]

Great job !!! You explained all the concepts clearly.

[Somtochukwu Okafor]

Thank you

[Vic]

This is a nice summary when you have a simple layout requirements and you don't want to deal with Flexbox and CSS Grid. I'd love to see a guide on using those.

[Somtochukwu Okafor]

Thank you Vic. More articles coming soon.