Sunday, April 13, 2014

Quick reference guide for formatting divs as tables



<!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>

No comments:

Post a Comment