Cacher is the code snippet organizer for pro developers

<!-- Position properties 
default (static)absolute|fixed|relative|initial|inherit 
Establish position with parent element set to relative -->

<div class="wrapper"><!--Parent -->
<div class="top">
Top 
</div>
<div class="middle">
Middle 
</div>
<div class="bottom">
Bottom
</div>
</div>

<style>
/* absolute - relative to browser viewport - or relative to the parent element
relative - position 150px to left */

.wrapper {
	position: relative;
}

.top{
	position:absolute; /* corner of the wrapper */
	right:0;
	top:0; /* offset */
}

.top::after{
	position:absolute; /* box inside the top box - parent (top) */
	left:0;
	bottom:0;
}

.middle{
   position:relative;
   left:150px;
   top:50px;
}

</style>

<!--Fixed -->

<div class="fixed">

<div class="wrapper">

<div class="top">
Top 
</div>
<div class="middle">
Middle 
</div>
<div class="bottom">
Bottom
</div>

</div>
</div>

<style>

/* Don't use z-index with float because it cause conflicting skims */

.fixed{
	position:fixed; 
	width:100%;
	height:100px;
	background-color: #000;
	top:0;
}

.wrapper {
	position: relative;/* corner of the wrapper */
	width:100px;
	height:200px;
	background-color: #000;
}

.top{
   position:relative;
   background: #000;
   z-index: 10;/* the bigger number always on top */
}

.middle{
   position:absolute;
   background: #000;
   z-index: 20;
}

.bottom{
   position:relative;
   background: #000;
   z-index: 30;
}
</style>

<!-- Width, Height and Overflow Properties - navigation () display - overflow ) -->

	<nav>
        <a href="#">link 1</a>
        <a href="#">link 2</a>
        <a href="#">link 3</a>
		</nav>

<div>
</div>
<style>

/* display:none;         -  element disapper 
   display:inline;       - a href default inline - no negative top and botom margin
   display:block;        - block element box with line before and after
   display:inline-block; - inline element float with surround content 
   visibility: hidden;   - content stay there but invisible */

nav{
   display:none;
}

a{
	width:100px;
	margin: 15px 0;
	display: inline-block;
}

 /* first you need to give a height to its parent ex: html{ height:100%; body{ height:100%;*/
div{
	height:100%;
}

/* Box Sizing CSS3 - padding and border goes together with content one width*/

/* Overflow Properties 
visible  - Default
hidden   - clear content outside the box
scroll   - scroll thru the content
auto     - scroll bar only when it need it*/

div{
	max-width: 990px;
	min-width:320px;
	max-height: 200px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow:hidden;
}

</style>

<!-- Float - clera elements-->

<div>
<img src="flag.png">
<p>hfhhjfhdgj fjjkdjk</p>
<br/>
</div>
<style>

/* clear:left;  -  clear floating element on left 
   clear:right; -  clear floating element on right
   clear:both;   */

div {
	overflow: hidden;
}

img{
    float:left;
}

p{
	float:left;
}

br{ /* clear element with br */
	clear:both;
}

 /* best method to clearfix - a new micro clearfix hack *


	<div class="clear">
		<div class="group"></div>
		<div class="floated"></div>
		<div class="floated"></div>
	</div>
*/

.group:before,
.group:after {
    content: " ";
    display: table;
}

.group:after {
    clear: both;
}
/*fi ie 7*/
.group{
	*zoom: 1;
}
</style>

<!-- content - padding - border - margin -->


<div class="box">
  The CSS Box model
</div>

<style>

.box{
	margin:20px;
	padding:20px;
	border:1px solid #000;
}

</style>