Pictures from Austin .Net Meeting December 14, 2015

Justin Self gave a very informative talk to 30 developers at adnug.org  about css positioning.
Here's a few pics of the evening.

Justin describing CSS

Panorama of the crowd

Pizza!

Justin used the tool "Bracket" by Adobe to give a live preview of changes.

My unordered list of jumbled notes:

border: 10px solid blue; #order doesn't matter
border-bottom:... #only for the bottom
margin property can be negative.
"auto" centers element horizontally only.

line height specifies vertical distance between lines of text in container.
line-height: [number | length | % ]
line-height: 4;
line-height: 30pt;

display
display:block; # default width is 100%. Always on same line
display:inline; # width is only based on content. You cannot set a width on it. Can do margin-left and right, but not top and bottom.
display:inline-block; # may have width. operates like a magic block inside inline element. display:none; # hides the element and its space. triggers a reflow.
float:left; float:right; #pushes element left or right. Treated as "display: block" except you can set the width.
clear: left #
clear: both #
visibility: hidden; #like display:none, but does not cause a reflow, keeps its place
position: static; # default, puts the element in the flow
position:relative; #moves element, but does not reflow
position: absolute; # positioned from positioned-ancestor with things like "top: 200px"
position: fixed; # takes it out of the flow, positioned in viewport
top, right, bottom left, only works for positioned elements
z-index # determines the depth position of stacked elements, only works for positioned elements, ie, not "position:static".
to center vertically:
position:absolute; top:50%; margin-top:10px;
margin-left: -25px;
left: -25px; # only on positioned elements

Justin did mention that most developers never sit down to learn CSS, we just learn tiny bits as needed.  I feel the same way, so it was great to get a full 2 hour overview of how positioning really works.