CSS Pixel Ruler
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
Here is the HTML:
<div class="pixelruler" id="px600">600</div> <div class="pixelruler" id="px700">700</div> <div class="pixelruler" id="px800">800</div> <div class="pixelruler" id="px900">900</div> <div class="pixelruler" id="px1000">1000</div> <div class="pixelruler" id="px1100">1100</div> <div class="pixelruler" id="px1200">1200</div> <div class="pixelruler" id="px1300">1300</div> <div class="pixelruler" id="px1400">1400</div> <div class="pixelruler" id="px1500">1500</div> <div class="pixelruler" id="px1600">1600</div> <div class="pixelruler" id="px1700">1700</div>
Here is the CSS:
div.pixelruler { border-bottom:solid 5px red; margin-bottom:20px; text-align:right; } #px600 {width:600px} #px700 {width:700px} #px800 {width:800px} #px900 {width:900px} #px1000 {width:1000px} #px1100 {width:1100px} #px1200 {width:1200px} #px1300 {width:1300px} #px1400 {width:1400px} #px1500 {width:1500px} #px1600 {width:1600px} #px1700 {width:1700px}