> For the complete documentation index, see [llms.txt](https://irena-popova.gitbook.io/boost-your-css-skills/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irena-popova.gitbook.io/boost-your-css-skills/positioning-content.md).

# 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>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://irena-popova.gitbook.io/boost-your-css-skills/positioning-content.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.