DEV Community

Cover image for Understanding layout positioning with CSS
Somtochukwu Okafor
Somtochukwu Okafor

Posted on

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.


man pushing box

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>
Enter fullscreen mode Exit fullscreen mode

CSS

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

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

    position: absolute;
    top: 100px;
    left: 100px;
    right: 100px;
Enter fullscreen mode Exit fullscreen mode

Result
position property

css box


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;
Enter fullscreen mode Exit fullscreen mode

We could also write it as:
CSS

    margin: 100px;

    /* where top, right, bottom and left = 100px */
Enter fullscreen mode Exit fullscreen mode

Result
margin property

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;
Enter fullscreen mode Exit fullscreen mode

We could also write it as:
CSS

    padding: 100px;

    /* where top, right, bottom and left = 100px */
Enter fullscreen mode Exit fullscreen mode

Result
padding property
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;
Enter fullscreen mode Exit fullscreen mode

Result
float property


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>
Enter fullscreen mode Exit fullscreen mode

Result
center tag

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.

Top comments (14)

Collapse
 
theo_philus profile image
Theo Philus

🤙

Collapse
 
tomisinadeyemo profile image
Adeyemo Tomisin Stephen

Good work👍🏽

Collapse
 
somtookaforr profile image
Somtochukwu Okafor

Thank you

Collapse
 
alfredonuada profile image
inspectorGadget

Good work, simple and concise

Collapse
 
somtookaforr profile image
Somtochukwu Okafor

Thank you

Collapse
 
cy3e profile image
Christopher Richardson

thanks' to you, this article help me

Collapse
 
somtookaforr profile image
Somtochukwu Okafor

I’m glad I could help

Collapse
 
codecke profile image
Ayomide Olayiwola

a nice summary

Collapse
 
somtookaforr profile image
Somtochukwu Okafor

Thank you

Collapse
 
oreodebs profile image
Oreodebs

👏🏻👏🏻

Collapse
 
mikael321 profile image
Mikael321

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

Collapse
 
somtookaforr profile image
Somtochukwu Okafor

Thank you

Collapse
 
vickalchev profile image
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.

Collapse
 
somtookaforr profile image
Somtochukwu Okafor

Thank you Vic. More articles coming soon.