Demo solutions with best practices for some common CSS problems
HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
LICENSE
README.md
arrows.html
boxmodel.html
center-horizontal.html
center-vertical1.html
center-vertical2.html
center-vertical3.html
equal-distance-alternative.html
equal-distance.html
equal-height-alternative.html
equal-height-improved1.html
equal-height-improved2.html
equal-height-improved3.html
equal-height.html
float.html
list.html
list_alternative.html
menu.html
numbering-headlines.html
numbering-list.html
quotes.html
skiplinks.html
sprites-and-uris.html
standard.css
width-to-height.html

README.md

css-common-problems

Demo solutions with best practices for some common CSS problems

CSS is getting better, but some common problems are still hard to solve, especially when it comes to layouting. This repo compiles some best practices. The respective stylesheet is included in the HTML files.

  1. Center blocks: a) horizontal b) vertical: method 1, method 2, method 3
  2. Adapt block height to its width
  3. Draw arrow heads on a box
  4. Any text as list symbol, alternative
  5. Drop-down menu without JavaScript
  6. Number hierarchical lists and headlines
  7. Typographic quotation marks
  8. Floating issues
  9. Multi-column layouts a) with fixed outer height: method 1, method 2 b) height determined by content: method 1, method 2, method 3
  10. Spread elements with equal distance, alternative
  11. CSS sprites and URIs
  12. Boxmodel alternatives
  13. Accessibility skiplinks