Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSSHTML
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 at 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
Your Filters
Interested
Ignored
     
0 Guruprasad.K.Basavaraju 400
1 Sergey Alexandrovich Kryukov 301
2 Shai Vashdi 240
3 OriginalGriff 155
4 Tadit Dash 135
0 Sergey Alexandrovich Kryukov 9,225
1 OriginalGriff 5,395
2 Peter Leow 4,100
3 Maciej Los 3,540
4 Abhinav S 3,333


Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 23 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid