Examples of common CSS properties and techniques

gistfile1.html

<style type="text/css" media="screen">
  *{margin:0; padding:0;}
  h1,h2{margin-bottom:10px; margin-top:30px;}
  body{padding:30px;}
</style>

<h1>floats</h1>
<h2>simple left/right</h2>
<style type="text/css" media="screen">
  #simple_floats{overflow:auto; border:5px solid #092994; width:500px;}
  #simple_floats #column_one{float:left; background-color:#B44810; width:240px;}
  #simple_floats #column_two{float:right; background-color:#B44810; width:240px;}
</style>
  
<div id="simple_floats">
  <div id="column_one">left</div>
  <div id="column_two">right</div>
</div>



<h2>grid of items all float left</h2>
<style type="text/css" media="screen">
  #float_grid{overflow:hidden; background-color:#092994; width:475px;}
  #float_grid ul{margin-right:-25px;}
  #float_grid li.grid_item{float:left; margin-right:25px; margin-bottom:25px; width:100px; height:100px; background-color:#B44810;}
</style>
<div id="float_grid">
  <ul>
    <li class="grid_item">item!</li>
    <li class="grid_item">item!</li>
    <li class="grid_item">item!</li>
    <li class="grid_item">item!</li>
    <li class="grid_item">item!</li>
    <li class="grid_item">item!</li>
    <li class="grid_item">item!</li>
    <li class="grid_item">item!</li>
    <li class="grid_item">item!</li>
  </ul>
</div>


<h1>Positioning</h1>
<style type="text/css" media="screen">
  #relative_wrap{background-color:#092994; width:100px; height:100px;}
  #relative_example{position:relative; text-align:right; bottom:20px; left:20px; background-color:#B44810; width:100px; height:100px;}
</style>
<div id="relative_wrap">
  <div id="relative_example">relative positioned bottom:20px; left:20px;</div>
</div>
  
<style type="text/css" media="screen">
  #absolute_example{position:absolute; right:100px;  color:#fff; background-color:#092994; width:100px; height:100px;}
</style>
<div id="absolute_example">positioned:absolute right:100px</div>
  

<style type="text/css" media="screen">
  #fixed_example{background-color:#B44810; position:fixed; right:10px; bottom:10px; width:100px; height:100px;}
</style>
<div id="fixed_example">positioned:fixed right:100px</div>

<h2>position absolute inside position relative</h2>
<style type="text/css" media="screen">
  #outter_positioned{position:relative; width:100px; height:100px; background-color:#B44810;}
  #inner_positioned{width:30px; height:30px; color:#fff; background-color:#092994; position:absolute; top:3px; left:5px;}
</style>
<div id="outter_positioned">
  <div id="inner_positioned">in</div>
</div>


<h2>layering</h2>
<style type="text/css" media="screen">
  #outter_layering{position:relative; width:100px; height:100px; background-color:yellow;}
  #layer1{width:50px; height:50px; color:#fff; background-color:red; position:absolute; top:2px; left:2px;}
  #layer2{width:50px; height:50px; color:#fff; background-color:blue; position:absolute; top:10px; left:10px;}
  #layer3{width:50px; height:50px; color:#fff; background-color:green; position:absolute; top:20px; left:20px;}
</style>
<div id="outter_layering">
  <div id="layer1">in</div>
  <div id="layer2">in</div>
  <div id="layer3">in</div>
</div>


<h1>Hovers</h1>

<style type="text/css" media="screen">
  #roll{width:100px; height:100px; background-color:#aaa;}
  #roll:hover{width:200px; background-color:red; font-weight:bold;}
</style>
<div id="roll">
  hello world
</div>

<h2>nested hover</h2>
<style type="text/css" media="screen">
  #foo{padding:50px;width:100px; height:100px; background-color:#333;}
  #foo #bar{width:50px; height:50px; background-color:#eee;}
  #foo:hover #bar{background-color:red;}
  #foo #bar:hover{background-color:yellow;}
</style>


<div id="foo"><div id="bar"></div></div>



<h2>nested hover</h2>
<style type="text/css" media="screen">
  #baz{padding:50px;width:100px; height:100px; background-color:#333;}
  #baz #garbly{display:none; width:50px; height:50px; background-color:#eee;}
  #baz:hover #garbly{display:block;}
  #baz #garbly:hover{background-color:yellow;}
</style>


<div id="baz"><div id="garbly"></div></div>




<h1>inline vs block</h1>
<style type="text/css" media="screen">
  #inline_block_wrap{width:100px; background-color:red;}
  .inline{display:inline; background-color:yellow; padding:5px; margin:5px; border:1px solid #000;}
  .block{display:block; background-color:yellow; padding:5px; margin:5px; border:1px solid #000;}
</style>

<div id="inline_block_wrap">
  <div class="inline">the </div>
  <div class="inline">quick </div>
  <div class="inline">brown </div>
  <div class="inline">fox </div>
  <div class="inline">jumps </div>

  <div class="block">over </div>
  <div class="block">the </div>
  <div class="block">lazy </div>
  <div class="block">dogs </div>
</div>




<h1>overflow</h1>
<style type="text/css" media="screen">
  #overflow_none{overflow:none; font-size:100px; width:100px; height:80px; background-color:orange; margin-bottom:10px;}
  #overflow_hidden{overflow:hidden; font-size:100px; width:100px; height:80px; background-color:orange; margin-bottom:10px;}
  #overflow_scroll{overflow:scroll; font-size:30px; width:100px; height:80px; background-color:orange; margin-bottom:10px;}
  #overflow_auto{overflow:auto; font-size:30px; width:100px; height:80px; background-color:orange; margin-bottom:10px;}
</style>


<div id="overflow_none">testtextgoeshere</div>
<div id="overflow_hidden">testtextgoeshere</div>
<div id="overflow_scroll">testtextgoeshere</div>
<div id="overflow_auto">testtextgoeshere</div>