Cacher is the code snippet organizer for pro developers

/*
Use FLOAT
1. When content is flexible and may change size/length (e.g. image surrounded by text or blog posts with different lengths)
2. Global or large pae structures (e.g. header, footer, and sidebar)

Use DISPLAY
1. Algining page components like floats (make sure to account for space that occurs between elements - make parent font-size: 0 and reset element font-size: originalvalue)
2. Good for aligning elements that need to be center aligned (use text-align: center on parent to align descendents)
3. Good since display will not change page's natural page flow and stacking order.

Use POSITION
1. When elements need to be positioned relative to another element's position
2. Aligning elements that are outside of the document flow (fixed nav bar)
3. Positioning elements to a specific spot in the document
4. NOT to be used for page layouts

DO NOT use together on same element, must select one or the other
1. If element is set to position:absolute or position:fixed => FLOAT is ignored
2. If using FLOAT => DISPLAY is ignored