<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <style type="text/css"> .containerButtons { width: 1200px; height: 40px; border-color: orange; border-style: solid; position: block; } .divButtonSection { width: 15%; height: 70%; border-color: blue; border-style: solid; float: right; position: inline-block; display: table-cell; vertical-align: middle; } .containerInformation { width: 1200px; height: 200px; border-color: grey; border-style: solid; display: block; } .divInformationTable { width: 24%; height: 95%; position: relative; border-color: green; border-style: dashed; display: inline-block; margin: 0px 0px 0px 0px; } .divInformationRow { width: 90%; height: 22%; position: relative; border-color: red; border-style: solid; display: block; margin: 0px 0px 0px 0px; } .divInformationHeaderCell { width: 96%; height: 90%; position: relative; border-color: black; border-style: solid; display: table-cell; margin: 0px 0px 0px 0px; float: left; } .divInformationCellLabel { width: 20%; height: 90%; position: relative; border-color: black; border-style: solid; display: table-cell; margin: 0px 0px 0px 0px; float: left; } .divInformationCellControl { width: 75%; height: 90%; position: relative; border-color: blue; border-style: solid; display: table-cell; margin: 0px 0px 0px 0px; float: left; } </style> </head> <body> <div class="containerInformation"> <div class="divInformationTable"> <div class="divInformationRow"> <div class="divInformationHeaderCell"> Dealer Information </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label1 </div> <div class="divCellControl"> Control1 </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label2 </div> <div class="divCellControl"> Control2 </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label2 </div> <div class="divCellControl"> Control2 </div> </div> </div> <div class="divInformationTable"> <div class="divInformationRow"> <div class="divInformationHeaderCell"> Seller Information </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label3 </div> <div class="divCellControl"> Control3 </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label4 </div> <div class="divCellControl"> Control4 </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label4 </div> <div class="divCellControl"> Control4 </div> </div> </div> <div class="divInformationTable"> <div class="divInformationRow"> <div class="divInformationHeaderCell"> Seller Information </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label3 </div> <div class="divCellControl"> Control3 </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label4 </div> <div class="divCellControl"> Control4 </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label4 </div> <div class="divCellControl"> Control4 </div> </div> </div> <div class="divInformationTable"> <div class="divInformationRow"> <div class="divInformationHeaderCell"> Seller Information </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label3 </div> <div class="divCellControl"> Control3 </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label4 </div> <div class="divCellControl"> Control4 </div> </div> <div class="divInformationRow"> <div class="divInformationCellLabel"> Label4 </div> <div class="divCellControl"> Control4 </div> </div> </div> </div> <div class="containerButtons"> <div class="divButtonSection"> OK </div> <div class="divButtonSection"> Cancel </div> </div> </body> </html>
Sunday, April 13, 2014
Quick reference guide for formatting divs as tables
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment