Examples of width classes

Blah blah blah, do as we say, not as we do. etc.

Don't forget that these classes are responsive - they will look different in different browser sizes. Make your browser window wider or narrower to see how they move around the screen and change their size.

Width classes

The width classes ('w-narrow', 'w-doublenarrow', 'w-wide', 'w-doublewide') can be used to set the size of columns on your pages. However, the best way to present your content is using the standard grid classes: doublewide, doublenarrow, wide and narrow.

You should only be using the width classes to set our your columns if your CMS has forced you to do so by hard coding a 'doublewide' at the top of the page.

Note that the width classes do not have margins set on their left or right - which makes them different to the grid classes. You will have to manually set margins when using combinations of width classes.

The common combinations of width classes are shown in the following sections. We will be assuming that you are using the width classes inside a 'doublewide' grid class.

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

Wrapping content around a small box or image

Sometime you may have a small piece of information or an image that you want the main body of text to wrap around. This will work 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 put the w-narrow content on either side, and note that a 'right' floated w-narrow will need 'marginleft', while a 'left' floated w-narrow will need 'marginright'.


    <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><strong>Note!</strong> I am some important text in a box on the right</p>
        </div>
    </div>
 

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


    <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

You will usually use two w-wide divs next to each other, to take up half the screen each. You need to set the margins on them manually. The first one needs a margin on the right, and the 2nd 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.

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 narrows

You can use 3 w-narrows next to each other to make 3 equal columns of content. You will need to set margins on them, and float them 'left' to make them appear on the same line. With the margin, 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 seperate the columns.

Note that as the screen gets smaller, the narrows start to take up more of the screen width. On smaller screens, there will only be two or one narrows filling the screen - subsequent narrow divs will get pushed underneath. Resize your browser to see this effect in action.

<div class="w-narrow left marginright">
    <h2>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>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>Narrow 3</h2>
    <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>
   

4. A w-doublenarrow and a w-narrow

A w-doublenarrow plus a w-narrow takes up the full content of a doublewide, so you can put them next to each other. You will need to set the margins correctly, and float them both 'left' to make it work properly.

Note that as the screen gets smaller, the w-doublenarrows and w-narrows start to take up more of the screen width. On smaller screens, subsequent divs will get pushed underneath the first div. Resize your browser to see this effect in action.

<div class="w-doublenarrow left marginright">
    <h2>Bigger 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>
   

Bigger 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 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 can be combined on a page if you want a more advanced layout. For example, you might put some content in a doublewide at the top of the page, followed by three narrows 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 grid 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