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. 4.

    display:  inline;   display:  inline-­‐block;   display:  block;   !

    [Also] display:  table;   display:  flex;   display:  grid;
  2. 7.

    Inline block respects vertical padding, vertical margin, height, and width

    Inline ignores height, width, and vertical padding & margin
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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>
  8. 17.
  9. 18.

    position:  relative;   position:  absolute;   position:  fixed;   position:

     static;   ! Default style for all elements Element scrolls with page
  10. 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)