- Skip to main content
- Skip to footer

# Positions and alignment - Grid System

## Table of contents

- Floats
- Clearing floats
- Horizontal alignment
- Vertical alignment
- Width
- Absolute positioning
- Indentation

## Floats

The float classes are used to align content.

The different float styling options
Class | Example
--- | ---
`float-left` | Resulting text floats left
`float-right` | Resulting text floats right

Examples

#### Example 1: Regular text flows under the grid cell

Grid cells behave like fixed width columns, so content never freely floats in the available white space below or around a neighbouring cell. However, there are lots of situations where you want the dimensions and structure of a grid, but need the benefit of regular free-flowing content. For example, if you want a small floating box on the right side of your page, and you want the body text to fill the space around it. You need to do the following:

1. Create the grid cell you want to appear on the right. A `span-2` is ideal for this.
2. Apply the `float-right` class to this grid cell.
3. Do not put the rest of the content in a grid cell, like a `span-4`. Instead, treat it like regular body text. The result is non-restricted content that fills the available space.

### Related Links

- Lorem ipsum
- Dolar sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem est, sollicitudin eget rhoncus non, pellentesque in urna. Ut dictum dapibus convallis. Vestibulum egestas lacinia justo, quis pellentesque sapien ultricies in. Maecenas ac turpis nisi, vitae dictum dui. Nulla rhoncus molestie massa, a aliquet risus placerat vel. Etiam tortor justo, mollis eget ultrices sed, lacinia porttitor nisi. Nulla facilisi. Vestibulum est turpis, auctor ac bibendum et, vestibulum nec lectus. Curabitur pharetra ullamcorper enim quis aliquam. In malesuada hendrerit dolor id lobortis. Donec quis nibh sit amet massa cursus convallis. Donec volutpat ipsum et justo egestas viverra. Aenean faucibus urna non nisl lacinia vitae molestie risus dapibus. Sed porttitor congue arcu eu semper. Proin est arcu, iaculis vel feugiat vitae, ullamcorper bibendum nunc.

View code

    <div class="span-2 module-related float-right">
    	<h3>Related Links</h3>
    	<ul>
    		<li><a href="#">Lorem ipsum</a></li>
    		<li><a href="#">Dolar sit amet</a></li>
    	</ul>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem est, sollicitudin eget rhoncus non, pellentesque in urna. Ut dictum dapibus convallis. Vestibulum egestas lacinia justo, quis pellentesque sapien ultricies in. Maecenas ac turpis nisi, vitae dictum dui. Nulla rhoncus molestie massa, a aliquet risus placerat vel. Etiam tortor justo, mollis eget ultrices sed, lacinia porttitor nisi. Nulla facilisi. Vestibulum est turpis, auctor ac bibendum et, vestibulum nec lectus. Curabitur pharetra ullamcorper enim quis aliquam. In malesuada hendrerit dolor id lobortis. Donec quis nibh sit amet massa cursus convallis. Donec volutpat ipsum et justo egestas viverra. Aenean faucibus urna non nisl lacinia vitae molestie risus dapibus. Sed porttitor congue arcu eu semper. Proin est arcu, iaculis vel feugiat vitae, ullamcorper bibendum nunc.</p>

#### Example 2: Regular text flows under the grid cell

Text naturally flows under the following `span-2` cell. Remember to align all images up with the text. To override the default settings, the following example requires `class="indent-large">` to align the sunflower image on the left with the text. The other image on the right does not require extra styling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem est, sollicitudin eget rhoncus non, pellentesque in urna. Ut dictum dapibus convallis. Vestibulum egestas lacinia justo, quis pellentesque sapien ultricies in. Maecenas ac turpis nisi, vitae dictum dui. Nulla rhoncus molestie massa, a aliquet risus placerat vel. Etiam tortor justo, mollis eget ultrices sed, lacinia porttitor nisi. Nulla facilisi. Vestibulum est turpis, auctor ac bibendum et, vestibulum nec lectus. Curabitur pharetra ullamcorper enim quis aliquam. In malesuada hendrerit dolor id lobortis. Donec quis nibh sit amet massa cursus convallis. Donec volutpat ipsum et justo egestas viverra. Aenean faucibus urna non nisl lacinia vitae molestie risus dapibus. Sed porttitor congue arcu eu semper. Proin est arcu, iaculis vel feugiat vitae, ullamcorper bibendum nunc.

Nullam vestibulum interdum erat, consequat semper ipsum vestibulum sed. Aenean vel placerat mi. Integer ac metus dolor, nec adipiscing mauris. Phasellus nec lorem tortor, in mollis nulla. Etiam urna felis, posuere vel vulputate eu, luctus sed sem. Aliquam nunc sapien, faucibus sit amet porttitor eu, ullamcorper a odio. Aenean ac augue dui, vel ultrices purus. Cras euismod laoreet leo, non venenatis est aliquam sit amet. Integer ornare vulputate neque at posuere. Nullam at augue vitae augue suscipit luctus eu non dui.

View code

    <div class="span-2 margin-bottom-medium margin-top-medium indent-none">
    	<img src="http://www.placehold.it/300x200" alt="" width="224" height="168" class="margin-bottom-none" />
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem est, sollicitudin eget rhoncus non, pellentesque in urna. Ut dictum dapibus convallis. Vestibulum egestas lacinia justo, quis pellentesque sapien ultricies in. Maecenas ac turpis nisi, vitae dictum dui. Nulla rhoncus molestie massa, a aliquet risus placerat vel. Etiam tortor justo, mollis eget ultrices sed, lacinia porttitor nisi. Nulla facilisi. Vestibulum est turpis, auctor ac bibendum et, vestibulum nec lectus. Curabitur pharetra ullamcorper enim quis aliquam. In malesuada hendrerit dolor id lobortis. Donec quis nibh sit amet massa cursus convallis. Donec volutpat ipsum et justo egestas viverra. Aenean faucibus urna non nisl lacinia vitae molestie risus dapibus. Sed porttitor congue arcu eu semper. Proin est arcu, iaculis vel feugiat vitae, ullamcorper bibendum nunc.</p>

    <p>Nullam vestibulum interdum erat, consequat semper ipsum vestibulum sed. Aenean vel placerat mi. Integer ac metus dolor, nec adipiscing mauris. Phasellus nec lorem tortor, in mollis nulla. Etiam urna felis, posuere vel vulputate eu, luctus sed sem. Aliquam nunc sapien, faucibus sit amet porttitor eu, ullamcorper a odio. Aenean ac augue dui, vel ultrices purus. Cras euismod laoreet leo, non venenatis est aliquam sit amet. Integer ornare vulputate neque at posuere. Nullam at augue vitae augue suscipit luctus eu non dui.</p>

## Clearing floats

Elements that are coded after a floated item will flow around it. To prevent this, a clear must be applied.

The different clear options:

- `clear`
- `clear-left`
- `clear-right`

Also refer to: Grid rows

## Horizontal alignment

The align classes are used to align text within a content block.

The different horizontal alignment styling options
Class | Example
--- | ---
`align-left` | Resulting text, left horizontal alignment
`align-center` | Resulting text, centre horizontal alignment
`align-right` | Resulting text, right horizontal alignment

### Float versus align

Float CSS makes the grid cell float, but does not affect the content inside inside it. Align CSS affects only the content within the grid cell, but not the grid cell itself. For example:

- `<div class="span-2 float-right">content</div>` moves the grid cell to the right side of the page, and
- `<div class="span-2 align-right">content</div>` moves the content within the cell to the right side of the cell, but the cell itself does not move.

Examples

#### Single Alignment

Notice that some table data is centred.
Fake | Fake | Fake | Fake
--- | --- | --- | ---
Centre | Left | Centre | Left

View code

    <table class="width-50">
    	<caption>Notice that the table data is centred as well</caption>
    	<tr>
    		<th scope="col">Fake</th>
    		<th scope="col">Fake</th>
    		<th scope="col">Fake</th>
    		<th scope="col">Fake</th>
    	</tr>
    	<tr>
    		<td class="align-center">Centre</td>
    		<td>Left</td>
    		<td class="align-center">Centre</td>
    		<td>Left</td>
    	</tr>
    </table>

#### Group Alignment

Notice that the table data is centred.
Fake | Fake | Fake | Fake
--- | --- | --- | ---
Centre | Centre | Centre | Centre

View code

    <table class="width-50 align-center">
    	<caption>Notice that the table data is centred as well</caption>
    	<tr>
    		<th scope="col">Fake</th>
    		<th scope="col">Fake</th>
    		<th scope="col">Fake</th>
    		<th scope="col">Fake</th>
    	</tr>
    	<tr>
    		<td>Centre</td>
    		<td>Centre</td>
    		<td>Centre</td>
    		<td>Centre</td>
    	</tr>
    </table>

## Vertical alignment

The different vertical alignment styling options
Class | Example
--- | ---
`align-top` | Resulting text, top vertical alignment
`align-middle` | Resulting text, middle vertical alignment
`align-bottom` | Resulting text, middle vertical alignment

## Width

This table uses the `width100` style to stretch it across 100% of the available space. This styling suits the content, as there is minimal word wrapping and white space.

The different table width styling options (usually only for `<table>`, `<td>` and `<th>`)
Class | Example
--- | ---
`width-100` | This block uses the `width-100` class.
`width-90` | This block uses the `width-90` class.
`width-80` | This block uses the `width-80` class.
`width-70` | This block uses the `width-70` class.
`width-60` | This block uses the `width-60` class.
`width-50` | This block uses the `width-50` class.
`width-40` | This block uses the `width-40` class.
`width-30` | This block uses the `width-30` class.
`width-20` | This block uses the `width-20` class.
`width-10` | This block uses the `width-10` class.

## Absolute positioning

By default, grids cells float left and stack side-by-side, forming rows from left to right. However, you can use positional CSS to layer them on top of each other. The parent cell will act as the container, and the child cells can be layered horizontally and vertically within the container, on top of other cells.

For example, here is a `span-6` (the parent) with a `span-3 position-top position-right` (the child). Inside the `span-3 position-top position-right` are three additional `span-1` children. Note: opacity CSS has been added to the below example, to further demonstrate the layering effect.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ante ac neque egestas sit amet molestie velit rhoncus. Quisque scelerisque ante non nibh feugiat non convallis nisl pharetra. Quisque magna quam, adipiscing non malesuada non, sollicitudin id ligula. Vestibulum aliquet dolor quis diam accumsan pretium. Aenean elementum imperdiet augue, ac facilisis arcu pulvinar eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ac elementum orci. Pellentesque ut nisl et nisi consectetur ultricies. Pellentesque hendrerit placerat dui, eget consequat urna pulvinar egestas. Nullam fringilla dui in nulla pellentesque at fringilla purus bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi quis eros sit amet neque convallis auctor.

lorem ipsum

lorem ipsum

lorem ipsum

125 years of parks

Parks Canada Review

Lost Arctic Ships

View code

    <div class="span-6">
    	<img height="190" width="700" alt="" src="1.png"/>
    	<div class="span-3 position-top position-right">
    		<div class="span-1 row-start background-light opacity-90">
    			<a href="#">
    				<img height="50" width="100" alt="" src="2.png"/>
    				<p class="font-small">125 years of parks</p>
    			</a>
    		</div>
    		<div class="span-1 background-light opacity-90 ">
    				<a href="#">
    				<img height="50" width="100" alt="" src="3.png"/>
    			<p class="font-small">Parks Canada Review</p>
    			</a>
    		</div>
    		<div class="span-1 background-light row-end opacity-90">
    			<a href="#">
    				<img height="50" width="100" alt="" src="4.png"/>
    				<p class="font-small">Lost Arctic Ships</p>
    			</a>
    		</div>
    		<div class="clear"></div>
    	</div>
    </div>
    <div class="clear"></div>

Class | Details
--- | ---
`position-top` | top: 0px
`position-top-small` | top: 10px
`position-top-medium` | top: 20px
`position-top-large` | top: 50px
`position-top-xlarge` | top: 100px
`position-right` | right: 0px
`position-right-small` | right: 10px
`position-right-medium` | right: 20px
`position-right-large` | right: 50px
`position-right-xlarge` | right: 100px
`position-bottom` | bottom: 0px
`position-bottom-small` | bottom: 10px
`position-bottom-medium` | bottom: 20px
`position-bottom-large` | bottom: 50px
`position-bottom-xlarge` | bottom: 100px
`position-left` | left: 0px
`position-left-small` | left: 10px
`position-left-medium` | left: 20px
`position-left-large` | left: 50px
`position-left-xlarge` | left: 100px

You must define both your x and y position. The x positions are `position-left-x` and `position-right-x`. The y positions are `position-top-x` and `position-bottom-x`. For example, if we start with these two items:

Item #1:

Plus item #2

Text

...means you can arrange position them in hundreds of ways. Here are three examples:

Text

Text

Text

## Indentation

For WET 3.1+ refer to: Offset grid cells

For WET 3.0: You can use a grid cell for indentation purposes. An empty grid cell for example, a `span-1` still retains its width property, but appears as empty white space.

### Example

This text indents because there is an empty `span-1` in front of it.

Source

    <div class="span-1"></div>
    <div class="span-5">
    	<p>This text indents because there is an empty <code>span-1</code> in front of it.</p>
    </div>

For more information about indents, refer to: Proximity: Indents

Date modified:
  2013-04-11