Width classes

Full width

There are cases when you need to force an element to take up the full width of its parent container. In these cases you can use the fullwidth class on the element.

A standard set of width classes are available for use within a content area grid class. These classes ensure that objects like tables and boxes align properly within the grid even when not given a column container of their own. The classes are w-narrow, w-doublenarrow, w-wide, and w-doublewide.

If you want content to wrap around objects with defined widths you need to 'float' the object by aligning it to the left or right. When wrapping objects, you may need to provide additional padding and spacing.

<div class="w-narrow"><div class="box-solid">
200px wide*
 
<div class="w-doublenarrow"><div class="box-bdr"> 440px wide*
 
<table class="tbl-row-bdr w-wide">320px wide*
 
<table class="tbl-space noborder bg-uni25 fullwidth"> 680px wide*
 

* The widths are actually 2 pixels less than stated (so 200px is really 198px) to cater for possible 1px borders around these elements.

Examples layouts

Using grid classes is best for page layout, but if your content management system has the doublewide class built into the page template, you will need to use width classes to lay out your content instead.

Note that unlike grid classes, width classes do not have margins set on their left or right so you will need to add them manually.

The common combinations of width classes are shown in the following sections:

Notes on the examples

  • The examples assume that you are using the width classes inside a doublewide grid class.
  • The grey shading below indicates the bounds of the divs rather than boxes on the webpage (boxes would have more padding inside).
  • The layouts are responsive. Make your browser window narrower to see how columns change position and size.
  • Responsive classes are also available to control appearance and order of columns as the screen size changes.

1. Single w-doublewide

A w-doublewide div will take up the whole width of a doublewide.

<div class="w-doublewide">
  <p>Some content that takes up the full width of the screen.  Lorem ipsum et lorem ipsum et  lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et
  </p>
</div>

Some content that takes up the full width of the screen. Lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et

Floating content

Sometimes you might have a small piece of information or an image that you want the main body of text to wrap around. This works best if your text is in a doublewide, and you put the smaller amount of information inside a w-narrow div, as shown below. Note the use of 'left' and 'right' to float the w-narrow content to either side, and note that a right-floated w-narrow needs 'marginleft', while a left-floated w-narrow needs 'marginright'.

Floating a box
<p>Some content that takes up the full width of the screen.  Lorem ipsum et lorem ipsum et  lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et
</p>

<div class="w-narrow right marginleft">
  <div class="box-solid">
    <p>I am some important text in a box on the right</p>
  </div>
</div>

I am some important text in a box on the right

Some content that takes up the full width of the screen. Lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et

Floating an image

<p>
  Some content that takes up the full width of the screen.  There is an image on my left.  There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left.
</p>

<div class="w-narrow left marginright">
  <img src="../images/features/graduate.jpg" alt="A graduate">
</div>
 
A graduate

Some content that takes up the full width of the screen. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left.

Some content that takes up the full width of the screen. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left.

Some content that takes up the full width of the screen. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left.

2. Two w-wides

Use two w-wide divs when you want two columns of equal width. You need to set the margins on them manually. The first one needs a margin on the right, and the second one needs a margin on the left. It is also important that you put a 'left' class on both the w-wide divs, which will cause them to float next to each other.

Responsive tip

On a small screen, the two w-wide divs will get stacked vertically so they fit on the screen. Resize your browser to see this in effect.

<div class="w-wide left marginright">
  <p>Some content in a w-wide - the first one shows on the left.  Lorem ipsum et lorem ipsum et
  </p>
</div>

<div class="w-wide left marginleft">
  <p>Some content in a 2nd w-wide - the second one shows on the right.  Lorem ipsum et lorem ipsum et
  </p>
</div>

Some content in a w-wide - the first one shows on the left. Lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et

Some content in a 2nd w-wide - the second one shows on the right. Lorem ipsum et lorem ipsum lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et

3. Three w-narrows

Use three w-narrow divs when you want three columns of equal width. You need to float them 'left' to make them appear on the same line, and you need to add margins. The first w-narrow should have a margin on the right, the middle w-narrow should have a margin on both right and left, and the third w-narrow should have a margin on the left.

There are other ways that may also work - such as floating the third column to the 'right' rather than 'left', but the way demonstrated here is guarenteed to work on all screen sizes. It is also recommended that you use the margin classes, rather than padding, to separate the columns.

Responsive tip

Note that as the screen width gets smaller (below 600px), the w-narrow divs get wider, pushing 'w-narrow 3' to the next line. Below 480px, the w-narrow divs each take up the full screen width, one underneath the other. Resize your browser to see this effect in action.

<div class="w-narrow left marginright">
  <h2>w-narrow 1</h2>
  <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>

<div class="w-narrow left marginright marginleft">
  <h2>w-narrow 2</h2>
  <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>

<div class="w-narrow left marginleft">
  <h2>w-narrow 3</h2>
  <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>
 

w-narrow 1

Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:

w-narrow 2

Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:

w-narrow 3

Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:

4. A w-doublenarrow and a w-narrow

Use a w-doublenarrow div next to a w-narrow div when you want one small column beside the main content. You will need to set the margins correctly, and float them both 'left' to make it work properly.

Responsive tip

Note that as the screen width gets smaller (below 600px), the doublenarrow div drops to the next line as the two divs no longer fit next to each other. Below 480px, the divs each take up the full screen width, one underneath the other. Resize your browser to see this effect in action.

<div class="w-doublenarrow left marginright">
  <h2>w-doublenarrow content on the left</h2>
  <p>Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>

<div class="w-narrow left marginleft">
  <h2>narrow content on the right</h2>
  <p>Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>
 

w-doublenarrow content on the left

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.

w-narrow content on the right

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.

Note that you don't have to have the w-doublenarrow first – you can just reverse the order of the divs to make the smaller column appear on the left. If you do reverse the order, make sure you change the marginleft and marginright so that the space appears between the two divs, not on the edge of the page.

w-narrow content on the left

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.

Bigger content on the right

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.

5. Combinations of the above

The four basic combinations shown above are often combined to create a page layout. For example, you might put some introductory content in a w-doublewide div at the top of the page, followed by three w-narrow divs below. You can just keep including any number of divs one after the other. There are a few things to keep in mind though:

  • Don't nest the width class divs. For example, don't put a w-narrow div inside a w-wide div, or any other combination. The divs should be closed before starting a new one.
  • Check your layout combination on large and small screen sizes, to make sure the layout works on all sizes.

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle