Click here to Skip to main content
12,506,338 members (54,817 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: CSS HTML
I am designing a div based html form but the design is not getting alligned properly

Here is part of my html and css

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
<div class="mainContainer">
    <div id="header"><div class="lblNormal">SERVICE CALL REPORT</div></div>
    <div id="callLog" >
        <div id="callLog1">  <label  class="lblNormal">SERVICE CALL LOG</label></div>
        <div id="callLog1"> <input type="text" class="textboxNormal" id="SerCallLog" name="txtSerCallLog" /></div>
    </div>
    <div id="typeVisit">
        <div id="typeVisit1"><div class="lblNormal">TYPE OF VISIT</div></div>
        <div id="typeVisit1">
            <select>
                <option value="Inspection">Inspection</option>
                <option value="Installation">Installation</option>
                <option value="Preventive">Preventive</option>
                <option value="Breakdown">Breakdown</option>
                <option value="Other">Other</option>
            </select>
        </div>
        <div id="typeVisit1"><div class="lblNormal">TYPE OF SERVICE</div></div>
        <div id="typeVisit1">
            <select>
                <option value="WARRANTEE">WARRANTEE</option>
                <option value="EXCOMA">EXCOMA</option>
                <option value="COMA">COMA</option>
                <option value="SECOMA">SECOMA</option>
                <option value="SMA">SMA</option>
                <option value="SPUMA">SPUMA</option>
                <option value="OCS">OCS</option>
            </select>
        </div>
    </div>
    <div id="callRec">
        <div id="callRec1"><label  class="lblNormal">CALL RECEIVED ON:</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="CallRecOn" name="txtCallRecOn" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME(in hrs.)</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="CallTime" name="txtCallTime" /></div>
        <div id="callRec1"><label  class="lblNormal">CALL ATTENDED ON:</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="CallAttendedOn" name="txtCallAttendedOn" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME IN(in hrs.):</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="TimeIn" name="txtTimeIn" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME OUT(in hrs.):</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="TimeOut" name="txtTimeOut" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME ON CALL(in hrs.):</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="TimeOnCall" name="txtTimeOnCall" /></div>
    </div>
    <div id="assoData">
        <div id="assoData1"><div class="lblNormal">ASSOCIATE DATA:NAME</div></div>
        <div id="assoData1"><input type="text" class="textboxNormal" id="AssociateDataName" name="txtAssociateDataName" /></div>
        <div id="assoData1"><div class="lblNormal">LOCATION:</div></div>
        <div id="assoData1"><input type="text" class="textboxNormal" id="AssociateDataLocation" name="txtAssociateDataLocation" /></div>
        <div id="assoData1"><div class="lblNormal">TEL:</div></div>
        <div id="assoData1"><input type="text" class="textboxNormal" id="AssociateDataTel" name="txtAssociateDataTel" /></div>
    </div>
    <div id="equipData">
        <div id="equipData1"><div class="lblNormal">EQUIPMENT DATA SR.NO.:</div></div>
        <div id="equipData1"><input type="text" class="textboxNormal" id="EquipmentDataSrNo" name="txtEquipmentDataSrNo" /></div>
        <div id="equipData1"><div class="lblNormal">MODEL:</div></div>
        <div id="equipData1"><input type="text" class="textboxNormal" id="EquipmentDataModel" name="txtEquipmentDataModel" /></div>
        <div id="equipData1"><div class="lblNormal">LOAD DATA:</div></div>
        <div id="equipData1"><input type="text" class="textboxNormal" id="EquipmentDataLoadData" name="txtEquipmentDataLoadData" /></div>
    </div>
    <div id="battData">
        <div id="battData1"><div class="lblNormal">BATTERY DATA:TYPE-</div></div>
        <div id="battData1">
            <select>
                <option value="SMF">SMF</option>
                <option value="WT">WT</option>
            </select>
        </div>
        <div id="battData1"><div class="lblNormal">MAKE:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataMake" name="txtBattaryDataMake" /></div>
        <div id="battData1"><div class="lblNormal">VOLTS:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataVolts" name="txtBattaryDataVolts" /></div>
        <div id="battData1"><div class="lblNormal">AH:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataAh" name="txtBattaryDataAh" /></div>
        <div id="battData1"><div class="lblNormal">NOS:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataNOS" name="txtBattaryDataNOS" /></div>
    </div>
    <div id="battCond">
        <div id="battCond1"><div class="lblNormal">BATTERY CONDITION:CHARGING VOLTAGE:</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionChargingVoltage" name="txtBattaryConditionChargingVoltage" /></div>
        <div id="battCond1"><div class="lblNormal">VDC</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionVDC" name="txtBattaryConditionVDC" /></div>
        <div id="battCond1"><div class="lblNormal">DISCHARGE VOLTAGE(ON LOAD):</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionDiscVolt" name="txtBattaryConditionDiscVolt" /></div>
        <div id="battCond1"><div class="lblNormal">VDC</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionOnLoadVDC" name="txtBattaryConditionOnLoadVDC" /></div>
    </div>
    <div id="maintenance">
        <div id="preveMaintMain">
            <div id="preveMaint">
                <div id="preveMaint1">
                    <div class="lblNormal">PREVENTIVE MAINTENANCE</div>
                </div>
                <div id="preveMaint1">
                    <div><div class="lblNormal">Condition of Ventilation</div></div>
                    <div><div class="lblNormal">Condition of Nut & Bolts of Equipment</div></div>
                    <div><div class="lblNormal">Condition of Input & Output Cables</div></div>
                    <div><div class="lblNormal">Condition of FAN , METER & LED Indication</div></div>
                    <div><div class="lblNormal">Equipment cleaned with vacuum</div></div>
                </div>
                <div id="preveMaint1">
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>
                        </select>
                    </div>
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>
                        </select>
                    </div>
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>
                        </select>
                    </div>
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>
                        </select>
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </div>
                </div>
            </div>
            <div id="preveMaintVolt">
                <div></div>
                <div><div class="lblNormal">Input Voltage</div><input type="text" class="textboxNormal" id="InputVoltage" name="txtInputVoltage" />VAC<div class="lblNormal">Output Voltage</div><input type="text" class="textboxNormal" id="OutputVoltage" name="txtOutputVoltage" />VAC</div>
                <div><div class="lblNormal">Checked Battery Back up (In Min.)</div><input type="text" class="textboxNormal" id="CheckedBattBackup" name="txtCheckedBattBackup" /></div>
            </div>
        </div>
        <div id="batMainNFault">
            <div id="battMaint">
                <div id="battMaint1"><div class="lblNormal">BATTERY MAINTEINANCE :</div></div>
                <div id="battMaint1">
                    <div><div class="lblNormal">Condition of Nut, Bolts & Links :</div></div>
                    <div><div class="lblNormal">Terminals & Lugs OK :</div></div>
                    <div><div class="lblNormal">Filled D.M.Water :</div></div>
                    <div><div class="lblNormal">Gravity & Voltage Checked :</div></div>
                    <div><div class="lblNormal">Cleaning Done :</div></div>
                </div>
                <div id="battMaint1">
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>
                        </select>
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </div>
                </div>
            </div>
            <div id="faltReported">
                <div id="faltReported1"><div class="lblNormal">FAULT REPORTED</div></div>
                <div id="faltReported2"><input type="text" class="textboxNormal" id="faultReported" name="txtfaultReported" /></div>
            </div>
        </div>
    </div>
    <div id="solutions">
        <div id="solutions1"><div class="lblNormal">SOLUTION</div></div>
        <div id="solutions2">
            <textarea rows="2" cols="50"> </textarea>
        </div>
    </div>
    <div id="remark">
        <div id="remark1"><div class="lblNormal">REMARKS</div></div>
        <div id="remark2">
            <textarea rows="2" cols="50"> </textarea>
        </div>
    </div>
</div><!-- Main div -->
 
</body>
</html>




My Css




.mainContainer
{
    width:100%;
    height:90%;
    background-color:gray;
}
 
.lblNormal
{
    font-family:Verdana, Geneva, sans-serif;
    font-size:5px;
}
 
.textboxNormal
{
    width:50px;
    height:8px;
}
.textboxLarge
{
    width:100px;
    height:8px;
}
.textboxSmall
{
    width:25px;
    height:8px;
}
 
#header
{
    width:50%;
    height:10%;
    background-color:gray;
}
#callLog
{
    width:40%;
    height:10%;
    border:1px solid black;
}
#callLog1
{
    width:48%;
    height:90%;
    float:left;
    display:block;
}
 
#typeVisit
{
    width:100%;
    height:10%;
    border:1px solid black;
}
#typeVisit1
{
    width:24.5%;
    float:left;
    display:block;
    height:90%;
}
#callRec
{
    width:100%;
    height:10%;
    border:1px solid black;
}
#callRec1
{
    width:7.9%;
    height:100%;
    float:left;
    display:block;
 
}
 
#assoData
{
    width:100%;
    height:10%;
}
#assoData1
{
    width:16%;
    height:100%;
    float:left;
    display:block;
}
 

#equipData
{
    width:100%;
    height:10%;
 
}
#equipData1
{
    width:16%;
    height:100%;
    float:left;
    display:block;
 
}
#battData
{
    width:100%;
    height:10%;
    background-color:red;
}
#battData1
{
    width:9.9%;
    height:100%;
    float:left;
    display:block;
    background-color:red;
}
 
#battCond
{
    width:100%;
    height:10%;
    background-color:blue;
}
#battCond1
{
    width:11%;
    height:100%;
    float:left;
    display:block;
    background-color:green;
}
 
#maintenance
{
    width:100%;
    height:20%;
    background-color:black;
}
 
#preveMaintMain
{
    width:49%;
    height:100%;
    float:left;
    display:block;
    background-color:aqua;
}
#preveMaint
{
    width:100%;
    height:100%;
    float:left;
    display:block;
    background-color:aqua;
}
#preveMaint1
{
    width:32%;
    height:100%;
    float:left;
    display:block;
    background-color:red;
}
#preveMaintVolt
{
    width:100%;
    height:100%;
    float:left;
    display:block;
    background-color:aqua;
}
 
#batMainNFault
{
    width:49%;
    height:100%;
    float:left;
    display:block;
    background-color:red;
}
#battMaint
{
    width:100%;
    height:60%;
    background-color:yellow;
}
#battMaint1
{
    width:32%;
    height:100%;
    float:left;
    display:block;
    background-color:green;
}
 
#faltReported
{
    width:100%;
    height:60%;
    background-color:yellow;
}
#faltReported1
{
    width:32%;
    height:100%;
    float:left;
    display:block;
    background-color:green;
}
#faltReported2
{
    width:64%;
    height:100%;
    float:left;
    display:block;
    background-color:green;
}
 
#solutions
{
    width:100%;
    height:10%;
    background-color:GREEN;
}
#solutions1
{
    width:14%;
    height:100%;
    float:left;
    display:block;
    background-color:RED;
}
#solutions2
{
    width:85%;
    height:100%;
    float:left;
    display:block;
    background-color:YELLOW;
}
 
#remark
{
    width:100%;
    height:10%;
    background-color:BLUE;
}
#remark1
{
    width:14%;
    height:100%;
    float:left;
    display:block;
    background-color:YELLOW;
}
#remark2
{
    width:85%;
    height:100%;
    float:left;
    display:block;
    background-color:RED;
}
Posted 22-Nov-12 3:15am
Comments
Abhishek Pant 22-Nov-12 10:16am
   
check your css (height and width) also you can use table inside div while using different div for each thing in a group.

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

There really is not a simple solution to your code entirely. I would direct you to a site with a pretty good instruction set on horiz/vertical centering with block/in-line elements etc. I added a couple of div's with style of clear:both and it improved the two divs calllog and typevisit. I think if you play around with some of the stuff or else go to a template site and just start inserting some of your fields you may get a good feel for what you need to do.

Try adding
<div class="clear"></div>
at the end of the calllog divs to see what I mean. Your css file should have a class definition of
.clear{
       clear:both; 
}
for the div to work correctly. Your code is too long to experiment and do it all for you. Read the tutorial and experiment. That is what makes it fun...

Check out Tutorial
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web01 | 2.8.160927.1 | Last Updated 23 Nov 2012
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100