Skip to content

Instantly share code, notes, and snippets.

@filipmares
Created November 14, 2011 02:52
Show Gist options
  • Save filipmares/1363124 to your computer and use it in GitHub Desktop.
Save filipmares/1363124 to your computer and use it in GitHub Desktop.
Pulse 3 CSS tricks
div{
position: absolute;
height: 50px;
width: 200px;
}
.center-horizontally{
left: 50%;
margin-left: -100px;
}
.center-vertically{
top: 50%;
margin-top: -25px;
}
/* Example #1 - Overflow Method */
#container{
overflow: hidden;
zoom: 1; /* IE fix */
}
.cell{
height: 50px; /* Optional */
width: 50px; /* Optional */
float: left;
margin: 0 5px 5px 5px;
}
-----------------------------------
/* Example #2 - Clearing DIV Method */
.clear{
clear: both;
}
<!-- Example #1 - Overflow Method -->
<div id="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
-----------------------------------
<!-- Example #2 - Clearing DIV Method -->
<div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="clear"></div>
</div>
html, body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Calibri, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6,p,a,img,li,ol,ul,fieldset,form,label,button{
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
}
ol, ul {
list-style: none;
}
a:focus {
outline: thin dotted;
}
a:hover, a:active {
opacity: 0.8;
}
img {
border: 0;
}
label:after{
content:":";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment