alphagov/manuals-frontend — pull request #122 by alicebartlett (2014-12-11 16:59:27+00:00)
Title: Fix the alignment of the titles

This is one of those annoying CSS problems that it is impossible to fix fully without sacrificing semantics crucial for accessibility.

This commit gives the `.subsection-id` field a minimum width that brings the title inline with the metadata in the head, unless this code is longer than 135px, in which case it will push further out. There are some manuals with longer subsection ids than 135px at font-size: 19, e.g. http://www.hmrc.gov.uk/manuals/sgsaroa/index.htm, however these are less common.

An alternative solution was investigated whereby the table layout algorithms were used (i.e. `display:table-row` was applied to the `li`) however this only works if the elements that have `display:table-cell` have only one parent, to which you apply `display:table-row`. Since in this case the id and title divs have a an `` and an `
` parenting them, this approach doesn't work. A possible solution of adding links around the individual id and title was looked at but this does quite odd things with keyboard focus unless you write some Javascript to correct focus behaviour.

In short: this solution is perfect for most titles and good enough for the rest without sacrificing accessibility for the sake of pixel perfection.

Before (with guidelines)
![screen shot 2014-12-11 at 15 20 23](https://cloud.githubusercontent.com/assets/68009/5398023/016b3f2c-8157-11e4-8cba-9ce173fad620.png)

After (guidelines)
![screen shot 2014-12-11 at 15 20 58](https://cloud.githubusercontent.com/assets/68009/5398022/fd37a2ec-8156-11e4-9d01-af004061d20c.png)

After (IE7 where min-width and table-cell don't work http://caniuse.com/#search=table-cell and http://caniuse.com/#search=min-width)
![screen shot 2014-12-11 at 16 54 28](https://cloud.githubusercontent.com/assets/68009/5398018/f8a0522e-8156-11e4-80c9-4e5d3f09c0e1.png)