Applies to:

  • CSS
  • HTML
A quick article on how to get a div layer to increase height based on how a heading fits on a page.

I have a heading like this:
The heading in full width
The code of this is:
<div id="page-title" class="col-xs-12">
	<h1><a href="/">A long heading that wraps over several lines</a></h1>

I needed to use these in a template I was working on. Font awesome is a brilliant tool for webdevelopers who want icons that can be any size of any color without compromising on image quality or overhead maintenance. It's basically a font set that has all the icons you would want in a modern website design.

To use this list, you can either:

  • Copy the font files to your template folder (my preference) and add the linked stylesheet in the head section of your webpage. I'm selective of what icons I copy over but the full directory can be found at
    <link rel="stylesheet" href="/path/to/font-awesome/css/font-awesome.min.css">
  • OR add the linked stylesheet to the head section of your webpage
    <link rel="stylesheet" href="">
You then add the icon to your webpage using a CSS reference:
<i class="fa fa-facebook-square"></i> My facebook social icon
Further examples are on the following site at

The List
This is a copy of the cheat sheet version 4.4. If some icons don't appear on this page, it is because I have only copied over some of the entire directory (the icons I want to use).

So many people asking this when the solution is a bit of aesthetic styling.


-- yields
000.      <-- What's going on here then?
Or check out this screenshot of the issue:
Ordered List Issue


This is a quick article on how to resolve the following issue:

  • Overall body background color is blue.
  • Background color of my contents is white.
  • When I visit a small page on the site, the contents background (white) shows.
  • When I visit a very long page on the site, the contents background disappears and reveals the overall background (blue) making the text very hard to read.

Took me a while to figure out what was the problem, I'd visit some pages and they'd be fine, but when visiting a long page, it would initially display properly but then the white background would disappear when the page finally loaded.