# Running elements

When working with [CSS and paged media](/setup/css-and-paged-media.md#page-margins) and [CSS and paged media](/setup/css-and-paged-media.md#page-areas), you may want to add more complex content, such as repeating HTML elements, to your layout. This can be achieved using running elements.&#x20;

Running elements are HTML elements that are moved out of the content flow and into the page context.

To create a running element, you will need to perform two steps:

First, define which element should be a running element. This is done by using the `position` property and the `running()` function. The `running()` function takes an identifier as an argument, which can be any valid identifier and will be used as the element's `id`.

```html
<body>
    <div id="header">
        Any header content can go here
    </div>
```

```css

#header {
    /* Position element as running with the id "my-header" */
    position: running(my-header);
}
```

Then place a running element in a page margin or page area, you will need to use the `content` property and the `element()` function. The `element()` function takes an identifier as an argument, which should be the same identifier used when defining the running element.

```css
@page {
    size: A4;
    margin: 5cm 2cm 2cm 2cm;
    
    @top-center {
        content: element(my-header);
    }
}
```

That's all there is to it! Now, the element with the `header` identifier will be repeated on each page. You can also create additional running elements for other page elements, such as a footer, using the same process.

{% hint style="warning" %}
If you plan on adding a footer element to each page of your paged media using running elements, it is important to make sure that the footer element appears at the beginning of your document flow, rather than at the end. This is because running elements are moved out of the normal content flow and into the page context, and if the content is not present at page generation time, it will not be displayed.
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://docs.typeset.sh/setup/css-and-paged-media/running-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
