Display Me! Positioning and clearing elements

921b21db0adbe6810cae63e616777d4a?s=47 thebeckyhamm
March 11, 2014

Display Me! Positioning and clearing elements

Reviews display, float, clear, and position CSS properties

921b21db0adbe6810cae63e616777d4a?s=128

thebeckyhamm

March 11, 2014
Tweet

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)