Build Shit in CSS

  1. Introduction
  2. Blocks, Inlines, and Display
  3. Selectors
  4. Box Model
  5. Floating+Clearing I
  6. Floating+Clearing II
  7. Centering
  8. Positioning
  9. Vertical Centering and Radius
  10. Z-Index
  11. :before and :after
  12. Columns
  13. Image Grids
  14. Say No To Bootstrap
  15. The Baseline
  16. Forms
  17. Tables
  18. Background Image
  19. More Transforms
  20. Other Resources I like

Clearing Floats

Often you'll want things that are side by side on opposite ends of a container.

By default, floating elements overhang their container, as you can see in the top example.

There are two ways to fix this:

  1. Set overflow:hidden; on the container. This clips anything that runs over, but it also causes the container to extend to fit the floats.
  2. Set an :after psuedoelement on the container and have it clear: both.
    • This is useful if you want to be able to hang outside the container in another way. In the third example, the boxes stick out the top.
    • In all the examples, there's a box-shadow that would be clipped by overflow: hidden;

Notes