Skip to content

Instantly share code, notes, and snippets.

View nextechu's full-sized avatar

Bruce Kyle nextechu

View GitHub Profile
@nextechu
nextechu / position-relative-and-absolute.css
Created January 18, 2014 23:02
If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1
#div-1 {
position: relative;
}
#div-1a {
position: absolute;
top: 0;
right: 0;
width: 200px;
}
@nextechu
nextechu / two-column.css
Created January 18, 2014 23:05
A two-column layout using relative and absolute positioning
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
@nextechu
nextechu / two-column-absolute-height.css
Created January 18, 2014 23:11
You could fix the height of the elements.
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
@nextechu
nextechu / float.css
Created January 18, 2014 23:17
#div-1a {
float:left;
width:200px;
}
@nextechu
nextechu / float-columns.css
Created January 19, 2014 00:02
If we float one column to the left, then also float the second column to the left, they will push up against each other.
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
@nextechu
nextechu / float-columns-with-clear.css
Created January 19, 2014 00:06
Then after the floating elements we can "clear" the floats to push down the rest of the content.
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
@nextechu
nextechu / inline-block.html
Created January 19, 2014 00:19
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<style>
ul#display-inline-block-example,
ul#display-inline-block-example li {
/* Setting a common base */
margin: 0;
padding: 0;
@nextechu
nextechu / inline-uneven.html
Created January 19, 2014 00:39
Inline-block for uneven items, with fix for IE7
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
ul#display-inline-block-example,
ul#display-inline-block-example li {
/* Setting a common base */
margin: 0;
@nextechu
nextechu / linline-block-fix-for-whitespace.html
Created January 19, 2014 00:53
<ul id="display-inline-block-example">
<li>Item one</li><li>Item two</li><li>Item three</li>
</ul>
@nextechu
nextechu / modernizr-useragent
Created March 19, 2014 18:46
<script>
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
// Run custom code for Internet Explorer.
}
</script>