div based designing of an html page

Question

0.00/5 (No votes)

See more:

I am designing a div based html form but the design is not getting alligned properly

Here is part of my html and css

XML

<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

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

ascentit solutions

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

vbmike · Answer 1 · 2012-11-23T06:56:00

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

HTML

<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

CSS

.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