Creating a Football Field in HTML & CSS -

i'm trying create football field in html & css i'm stuck. tried debugging hours no avail.

here's code:

#endzone {    float: left;    width: 300px;    height: 500px;    background-color: red;  }  .tophash div {    margin-left: 300px;    width: 30px;    height: 30px;    border-right: 1px solid white;  }  #middletophash div {    margin-top: 170px;    width: 30px;    height: 30px;    border-right: 1px solid white;    float: left;  }  .middlebottomhash div {    margin-top: 270px;    width: 30px;    height: 30px;    border-right: 1px solid white;    float: left;  }  .bottomhash div {    margin-top: 470px;    width: 30px;    height: 30px;    border-right: 1px solid white;    float: left;  }

<div class="footballfield">    <div id="endzone"></div>    <div class="tophash">      <div id="oneyardlinetophash"></div>      <div id="twoyardlinetophash"></div>      <div id="threeyardlinetophash"></div>      <div id="fouryardlinetophash"></div>    </div>    <div id="fiveyardline"></div>    <div class="tophash">      <div id="sixyardline"></div>      <div id="sevenyardline"></div>      <div id="eightyardline"></div>      <div id="nineyardline"></div>      <div id="tenyardline"></div>    </div>    <div class="middletophash">      <div id="oneyardlinemiddletophash"></div>      <div id="twoyardlinemiddletophash"></div>    </div>    <div class="middlebottomhash">      <div id="oneyardlinemiddlebottomhash"></div>      <div id="twoyardlinemiddlebottomhash"></div>    </div>    <div class="bottomhash">      <div id="oneyardlinebottomhash"></div>      <div id="twoyardlinebottomhash"></div>    </div>  </div>

edit: how following css rule every hash 30px right of each other?

.tophash div {     left: 300px;     width: 30px;     height: 30px;     border-right: 1px solid white; } 

edit 2: result want:

the difference want yard hashes 30px away each other

looks i'm going hard way

html:

    <div class="footballfield">     <div id="endzone"></div>     <div class="tophash">     <div id="oneyardlinetophash"></div>     <div id="twoyardlinetophash"></div>     <div id="threeyardlinetophash"></div>     <div id="fouryardlinetophash"></div>     <div id="sixyardlinetophash"></div>     <div id="sevenyardlinetophash"></div>     <div id="eightyardlinetophash"></div>     <div id="nineyardlinetophash"></div>     <div id="elevenyardlinetophash"></div>     <div id="twelveyardlinetophash"></div>     <div id="thirteenyardlinetophash"></div>     <div id="fourteenyardlinetophash"></div>     <div id="sixteenyardlinetophash"></div>     <div id="seventeenyardlinetophash"></div>     <div id="eighteenyardlinetophash"></div>     <div id="nineteenyardlinetophash"></div>     <div id="twentyoneyardlinetophash"></div>     <div id="twentytwoyardlinetophash"></div>     <div id="twentythreeyardlinetophash"></div>     </div>     <div class="middletophash">     <div id="oneyardlinemiddletophash"></div>     <div id="twoyardlinemiddletophash"></div>     <div id="threeyardlinemiddletophash"></div>     <div id="fouryardlinemiddletophash"></div>     <div id="sixyardlinemiddletophash"></div>     <div id="sevenyardlinemiddletophash"></div>     <div id="eightyardlinemiddletophash"></div>     <div id="nineyardlinemiddletophash"></div>     <div id="elevenyardlinemiddletophash"></div>     <div id="twelveyardlinemiddletophash"></div>     <div id="thirteenyardlinemiddletophash"></div>     <div id="fourteenyardlinemiddletophash"></div>     <div id="sixteenyardlinemiddletophash"></div>     <div id="seventeenyardlinemiddletophash"></div>     <div id="eighteenyardlinemiddletophash"></div>     <div id="nineteenyardlinemiddletophash"></div>     <div id="twentyoneyardlinemiddletophash"></div>     <div id="twentytwoyardlinemiddletophash"></div>     <div id="twentythreeyardlinemiddletophash"></div>     </div>     <div class="middlebottomhash">     <div id="oneyardlinemiddlebottomhash"></div>     <div id="twoyardlinemiddlebottomhash"></div>     <div id="threeyardlinemiddlebottomhash"></div>     <div id="fouryardlinemiddlebottomhash"></div>     <div id="sixyardlinemiddlebottomhash"></div>     <div id="sevenyardlinemiddlebottomhash"></div>     <div id="eightyardlinemiddlebottomhash"></div>     <div id="nineyardlinemiddlebottomhash"></div>     <div id="elevenyardlinemiddlebottomhash"></div>     <div id="twelveyardlinemiddlebottomhash"></div>     <div id="thirteenyardlinemiddlebottomhash"></div>     <div id="fourteenyardlinemiddlebottomhash"></div>     <div id="sixteenyardlinemiddlebottomhash"></div>     <div id="seventeenyardlinemiddlebottomhash"></div>     <div id="eighteenyardlinemiddlebottomhash"></div>     <div id="nineteenyardlinemiddlebottomhash"></div>     <div id="twentyoneyardlinemiddlebottomhash"></div>     <div id="twentytwoyardlinemiddlebottomhash"></div>     <div id="twentythreeyardlinemiddlebottomhash"></div>     </div>     <div class="bottomhash">     <div id="oneyardlinebottomhash"></div>     <div id="twoyardlinebottomhash"></div>     <div id="threeyardlinebottomhash"></div>     <div id="fouryardlinebottomhash"></div>     <div id="sixyardlinebottomhash"></div>     <div id="sevenyardlinebottomhash"></div>     <div id="eightyardlinebottomhash"></div>     <div id="nineyardlinebottomhash"></div>     <div id="elevenyardlinebottomhash"></div>     <div id="twelveyardlinebottomhash"></div>     <div id="thirteenyardlinebottomhash"></div>     <div id="fourteenyardlinebottomhash"></div>     <div id="sixteenyardlinebottomhash"></div>     <div id="seventeenyardlinebottomhash"></div>     <div id="eighteenyardlinebottomhash"></div>     <div id="nineteenyardlinebottomhash"></div>     <div id="twentyoneyardlinebottomhash"></div>     <div id="twentytwoyardlinebottomhash"></div>     <div id="twentythreeyardlinebottomhash"></div>     </div>     <div id="fiveyardline"></div>     <div id="tenyardlinetopmark">&lt10</div>     <div id="tenyardline"></div>     <div id="tenyardlinebottommark">&lt10</div>     <div id="fifteenyardline"></div>     <div id="twentyyardlinetopmark">&lt20</div>     <div id="twentyyardline"></div>     <div id="twentyyardlinebottommark">&lt20</div> 

css:

    #endzone{float: left; width: 300px; height: 500px; background-color: red;}     .tophash div{width: 30px; height: 30px; border-right: 1px solid white; position: absolute;}     #oneyardlinetophash{left: 300px;}     #twoyardlinetophash{left: 330px;}     #threeyardlinetophash{left: 360px;}     #fouryardlinetophash{left: 390px;}     #sixyardlinetophash{left: 450px;}     #sevenyardlinetophash{left: 480px;}     #eightyardlinetophash{left: 510px;}     #nineyardlinetophash{left: 540px;}     #elevenyardlinetophash{left: 600px;}     #twelveyardlinetophash{left: 630px;}     #thirteenyardlinetophash{left: 660px;}     #fourteenyardlinetophash{left: 690px;}     #sixteenyardlinetophash{left: 750px;}     #seventeenyardlinetophash{left: 780px;}     #eighteenyardlinetophash{left: 810px;}     #nineteenyardlinetophash{left: 840px;}     #twentyoneyardlinetophash{left: 900px;}     #twentytwoyardlinetophash{left: 930px;}     #twentythreeyardlinetophash{left: 960px;}      .middletophash div{top: 170px; width: 30px; height: 30px; border-right: 1px solid white; position: absolute;}     #oneyardlinemiddletophash{left: 300px;}     #twoyardlinemiddletophash{left: 330px;}     #threeyardlinemiddletophash{left: 360px;}     #fouryardlinemiddletophash{left: 390px;}     #sixyardlinemiddletophash{left: 450px;}     #sevenyardlinemiddletophash{left: 480px;}     #eightyardlinemiddletophash{left: 510px;}     #nineyardlinemiddletophash{left: 540px;}     #elevenyardlinemiddletophash{left: 600px;}     #twelveyardlinemiddletophash{left: 630px;}     #thirteenyardlinemiddletophash{left: 660px;}     #fourteenyardlinemiddletophash{left: 690px;}     #sixteenyardlinemiddletophash{left: 750px;}     #seventeenyardlinemiddletophash{left: 780px;}     #eighteenyardlinemiddletophash{left: 810px;}     #nineteenyardlinemiddletophash{left: 840px;}     #twentyoneyardlinemiddletophash{left: 900px;}     #twentytwoyardlinemiddletophash{left: 930px;}     #twentythreeyardlinemiddletophash{left: 960px;}      .middlebottomhash div{top: 270px; width: 30px; height: 30px; border-right: 1px solid white; position: absolute;}     #oneyardlinemiddlebottomhash{left: 300px;}     #twoyardlinemiddlebottomhash{left: 330px;}     #threeyardlinemiddlebottomhash{left: 360px;}     #fouryardlinemiddlebottomhash{left: 390px;}     #sixyardlinemiddlebottomhash{left: 450px;}     #sevenyardlinemiddlebottomhash{left: 480px;}     #eightyardlinemiddlebottomhash{left: 510px;}     #nineyardlinemiddlebottomhash{left: 540px;}     #elevenyardlinemiddlebottomhash{left: 600px;}     #twelveyardlinemiddlebottomhash{left: 630px;}     #thirteenyardlinemiddlebottomhash{left: 660px;}     #fourteenyardlinemiddlebottomhash{left: 690px;}     #sixteenyardlinemiddlebottomhash{left: 750px;}     #seventeenyardlinemiddlebottomhash{left: 780px;}     #eighteenyardlinemiddlebottomhash{left: 810px;}     #nineteenyardlinemiddlebottomhash{left: 840px;}     #twentyoneyardlinemiddlebottomhash{left: 900px;}     #twentytwoyardlinemiddlebottomhash{left: 930px;}     #twentythreeyardlinemiddlebottomhash{left: 960px;}      .bottomhash div{top: 470px; width: 30px; height: 30px; border-right: 1px solid white; position: absolute;}     #oneyardlinebottomhash{left: 300px;}     #twoyardlinebottomhash{left: 330px;}     #threeyardlinebottomhash{left: 360px;}     #fouryardlinebottomhash{left: 390px;}     #sixyardlinebottomhash{left: 450px;}     #sevenyardlinebottomhash{left: 480px;}     #eightyardlinebottomhash{left: 510px;}     #nineyardlinebottomhash{left: 540px;}     #elevenyardlinebottomhash{left: 600px;}     #twelveyardlinebottomhash{left: 630px;}     #thirteenyardlinebottomhash{left: 660px;}     #fourteenyardlinebottomhash{left: 690px;}     #sixteenyardlinebottomhash{left: 750px;}     #seventeenyardlinebottomhash{left: 780px;}     #eighteenyardlinebottomhash{left: 810px;}     #nineteenyardlinebottomhash{left: 840px;}     #twentyoneyardlinebottomhash{left: 900px;}     #twentytwoyardlinebottomhash{left: 930px;}     #twentythreeyardlinebottomhash{left: 960px;}      #fiveyardline{left: 420px; width: 30px; height: 500px; border-right: 1px solid white; position: absolute;}     #tenyardlinetopmark{left: 575px; top: 100px; color: white; position: absolute; font-size: 24px;}     #tenyardline{left: 570px; width: 30px; height: 500px; border-right: 1px solid white; position: absolute;}     #tenyardlinebottommark{left: 575px; top: 400px; color: white; position: absolute; font-size: 24px;}     #fifteenyardline{left: 720px; width: 30px; height: 500px; border-right: 1px solid white; position: absolute;}     #twentyyardlinetopmark{left: 875px; top: 100px; color: white; position: absolute; font-size: 24px;}     #twentyyardline{left: 870px; width: 30px; height: 500px; border-right: 1px solid white; position: absolute;}     #twentyyardlinebottommark{left: 875px; top: 400px; color: white; position: absolute; font-size: 24px;}