Display Me! Positioning and clearing elements

Reviews display, float, clear, and position CSS properties

Transcript

1. Display Me! Positioning and clearing elements
2. display float position clear
3. ! display
4. display:  inline;   display:  inline-­‐block;   display:  block;   ! [Also] display:  table;   display:  flex;   display:  grid;
5. <div></div> <img/> <span></span> <button> <button> <p></p> <h2></h2>
6. <div style=“display: inline;”></div> <img/> <span style=“display: block;”></span> <button> <p style=“display: inline;”></p> <h2></h2>
7. Inline block respects vertical padding, vertical margin, height, and width Inline ignores height, width, and vertical padding & margin
8. ! coding interlude 1
9. ! floats!
10. float:  left;   float:  right;   float:  none;   !
11. <div>1</div> <div>2</div> float: left; float: left; <div>1</div> <div>2</div> float: left; float:right; <div>2</div> <div>1</div> float: right; float: right; Floating 2 divs left Floating 2 divs right (the first div appears on the right) Floating one right and one left
12. ! clearing floats
13. <div></div> <div></div> float: left; float: left; <span></span> :( If 2 elements are floated and followed by an inline element, the inline element will try to fill in the remaining space
14. 1. HTML (old school): <br  clear="all"  />   <div  style="clear:  both;"></div>   ! 2. CSS (cool school): clear:  both;   clear:  left;   clear:  right;   A couple ways to clear a float Apply to containing (parent) element
15. The best way to clear a float: ! .clearfix:after  {     content:  "";     clear:  both;     display:  table;     }   ! <div  class=“clearfix”>stuff</div>   ! ! Apply to containing (parent) element
16. <div></div> <div></div> float: left; float: left; <span></span> :( <div></div> <div></div> <div></div> float: left; float: left; <span></span> :) <div class=“clearfix”></div>
17. position
18. position:  relative;   position:  absolute;   position:  fixed;   position:  static;   ! Default style for all elements Element scrolls with page
19. <div></div> position: relative; <div></div> <div></div> position: absolute; position: relative; <div></div> position: relative; <div></div> position: absolute; An absolutely positioned element acts as a different layer and ignores other elements Position the containing (parent) element relative and the child element absolute. By default the only element on a page with relative position is the < body> (which is why this absolutely positioned <div> is all the way at the top of the page)