Understanding layout positioning with CSS
Tags: css, webdev, beginners, html
Published: 2022-02-21 08:57:17

#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. <br/><br/>
![man pushing box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqat6v19wigpssrdo09n.png) <br /><br />

**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. <br/><br/>

**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**
![position property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jxnopmtvpo6f26nokdg.png) <br /><br /> ![css box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6htqr7hvffz13sqrpka.png) <br /><br />
**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**
![margin property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/391jfvv3v5ej97b1lr6u.png) <br /><br />

**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**
![padding property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mx3gdigujbc27khce7vm.png) <br/> 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.<br /><br />

**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**
![float property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s6l7nsw87fc7mo4b8qi.png)
<br /><br />

_**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**
![center tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mw7pta1f0a6qz3lqnez.png) <br /> <br />
 	
###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](https://twitter.com/somtookafor_) and [Linkedin](https://www.linkedin.com/in/somtochukwu-okafor-3b04561a6/).