Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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



March 11, 2014

More Decks by thebeckyhamm

Other Decks in Design


  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)