Applies to:

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

What?
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>
</div>

What?
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.

How?
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 https://github.com/FortAwesome/Font-Awesome:
    <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="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
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 https://fortawesome.github.io/Font-Awesome/examples/.

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

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

ol{margin:4px}

-- yields
995.
996.
997.
998.
999.
000.      <-- What's going on here then?
001.
002.
Or check out this screenshot of the issue:
Ordered List Issue

How?

What?
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.

Why?
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.

How?