Positions and alignment - Grid System

Table of contents

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