step-rev-board

by Troy Johnson

HTML

<h3 style="text-align:center">Variation of original board</h3>
<div class="border">
    <!--row 1-->
    <div class="green" ></div>
    <div class="white">
    <img alt="Queen"  src="http://stepheagle.domainsforauthors.com/Queen1.png" width="120"></div>
    <div class="green"></div>
    <div class="white"></div>
    <!--row 2-->    
    <div class="white"></div>    
    <div class="green"></div>
    <div class="white"></div>
    <div class="green"></div>
    <!--row 3-->
    <div class="green"></div>
    <div class="white" ></div>
    <div class="green"></div>
    <div class="white"></div>
    <!--row 4-->
    <div class="white" ></div>
    <div class="green"></div>
    <div class="white" ></div>
    <div class="green"></div> 
 <div style="clear: both;"></div>   
<!-- I'm not happy about having to clear the float here
     but the green bpard was not going around all the div
      withoout it  -->          
        
</div>

CSS

img {width:100%;height:100%;}
.border {
    max-width:480px; max-height:480px;
	border:10px solid green;text-align:center; 
    margin-right:auto; margin-left:auto;
}
.green {
/*    width:120px;max-width:25%;height:120px;max-height:25vw;   */
    width:120px;max-width:25%;height:120px;max-height:25vw;
        /* where vw is a percentage of the vertical width in this case 25% 
           see http://www.w3schools.com/cssref/css_units.asp  */
    background-color:#336600;
	float:left;
}
.white {
    width:120px;max-width:25%;height:120px;max-height:25vw;
    background-color:white;
    float:left}

/* of course there is more than one way to complete this assignment */