# Positioning Content

#### How to bring structure to our designs and helping make content more digestible? :thinking: 

There are a few different types of positioning within CSS, and each has its own application. In this chapter we’re going to take a look at a few different use cases—creating reusable layouts and uniquely positioning one-off elements—and describe a few ways to go about each.

### :point\_right: Positioning using Float property <a href="#floats" id="floats"></a>

One way to position elements on a page is with the **`float`** property. The **`float`** property is pretty versatile and can be used in a number of different ways.

Essentially, the **`float`** property allows us to take an element, remove it from the normal flow of a page, and position it to the left or right of its parent element. All other elements on the page will then flow around the floated element. An **`<img>`** element floated to the side of a few paragraphs of text, for example, will allow the paragraphs to wrap around the image as necessary.

When the **`float`** property is used on multiple elements at the same time, it provides the ability to create a layout by floating elements directly next to or opposite each other, as seen in multiple-column layouts.

The **`float`** property accepts a few values; the two most popular values are `left` and `right`, which allow elements to be floated to the left or right of their parent element.

```css
img {  float: left;}
```

#### Floats example

A common page layout with a header at the top, two columns in the center, and a footer at the bottom. Ideally this page would be marked up using the **`<header>`**, **`<section>`**, **`<aside>`**, and **`<footer>`** elements

```markup
<header>...</header>
<section>...</section>
<aside>...</aside>
<footer>...</footer>

```

Here the **`<section>`** and **`<aside>`** elements, **as block-level element**s, will be **stacked on top of one another by defaul**t. However, we want these elements to sit side by side. By floating the **`<section>`** to the **`left`** and the `<aside>` to the `right`, we can position them as two columns sitting opposite one another. Our CSS should look like this:

```css
section {  float: left;}aside {  float: right;}
```

:point\_right: when an element is floated, it will float all the way to the edge of its parent element. If there isn’t a parent element, the floated element will then float all the way to the edge of the page.

:point\_right::octagonal\_sign: **When we float an element, we take it out of the normal flow of the HTML document.** This causes the width of that element to default to the width of the content within it. Sometimes, such as when we’re creating columns for a reusable layout, this behavior is not desired. It can be corrected by adding a fixed `width` property value to each column. Additionally, to prevent floated elements from touching one another, causing the content of one to sit directly next to the content of the other, we can use the **`margin`** property to create space between elements.

Here, we are extending the previous code block, adding a **`margin`** and `width` to each column to better shape our desired outcome

```css
section {  
float: left;  
margin: 0 1.5%;  
width: 63%;}

aside {  
float: right;  
margin: 0 1.5%;  
width: 30%;}
```

:octagonal\_sign: **Floats May Change an Element’s Display Value**

When floating an element, it is also important to recognize that an element is removed from the normal flow of a page, and that may change an element’s default `display` value. The `float` property relies on an element having a `display` value of `block`, and may alter an element’s default `display` value if it is not already displayed as a block-level element.

For example, an element with a `display` value of `inline`, such as the `<span>` inline-level element, ignores any `height` or `width` property values. However, should that inline-level element be floated, its `display` value will be changed to block, and it may then accept `height` or `width` property values.

As we float elements we must keep an eye on how their `display` property values are affected.

With two columns we can float one column to the left and another to the right, but with more columns we must change our approach.

&#x20;For example, we’d like to have a row of three columns between our `<header>` and `<footer>` elements. If we drop our `<aside>` element and use three `<section>` elements.

HTML

```markup
<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>

```

To position these three `<section>` elements in a three-column row, instead of floating one column to the left and one column to the right, we’ll float all three `<section>` elements to the left. We’ll also need to adjust the width of the `<section>` elements to account for the additional columns and to get them to sit one next to the other.

```css
section {  
float: left;  
margin: 0 1.5%;  
width: 30%;}
```

Here we have three columns, all with equal width and margin values and all floated to the `left`.

#### :point\_right: Clearing & Containing Floats

The `float` property was originally designed to allow content to wrap around images. An image could be floated, and all of the content surrounding that image could then naturally flow around it. Although this works great for images, the `float` property was never actually intended to be used for layout and positioning purposes, and thus it comes with a few pitfalls.

One of those pitfalls is that occasionally the proper styles will not render on an element that it is sitting next to or is a parent element of a floated element. When an element is floated, it is taken out of the normal flow of the page, and, as a result, the styles of elements around that floated element can be negatively impacted.

Often `margin` and `padding` property values aren’t interpreted correctly, causing them to blend into the floated element; other properties can be affected, too.

Another pitfall is that sometimes unwanted content begins to wrap around a floated element. Removing an element from the flow of the document allows all the elements around the floated element to wrap and consume any available space around the floated element, which is often undesired.<br>