Hi,
First and foremost, I'm a total beginner with CSS. I'm having a very
difficult time getting things to align the way I want them to.
I have a form that I want formatted as follows:
On the left of the window: a boxed area for ID information. On the
right of the window, same line, a boxed area for Family information.
Lastly, underneath these two, a boxed area for mailing information.
At first, I was trying to get this done with tables, but there was too
much space between the tables. Basically, I had a single containing
table, and in the first row two other tables for the ID info and
family info. Then, another row for the last table. However, no
matter what I did, I couldn't get the "boxes" to be contained within
the browser window without a long horizontal scroll bar on the
bottom. So, I've turned to using div tags.
However, now I've got a problem. So, far, I can get the first two
"boxes" on the same line, but the third box, Mailing info, doesn't go
where I want it. Instead, it's either behind or in front of the first
two. Here is the relevant code for the divisions I'm doing:
#leftDiv {
position: absolute;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
left: 10px;
}
#rightDiv {
position: absolute;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
right: 10px;
}
#centerDiv {
position: absolute;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
#content {
padding-top : 50px;
padding-left : 75px;
margin : 0 auto;
width : 100%;
}
<div id="content">
<h1 class="Title">New Patient Registration</h1>
<form id="NewPatientForm" onsubmit="return CheckFormValues(this,
['comments,husband_lastname,husband_firstname'])"
action="{$formAction}?new=insert" method=post>
<div id="leftDiv">
<table id="table_sub1">
<caption><h2>Personal Information</h2></caption>
<tr><td id="light">OD number</td></TD><TD>{$odn} - first 4
characters are for the year, then add 6 more</TD></tr>
<tr><td id="dark">Last Name</td><td>{$lastname}</td></tr>
<tr><td id="light">First Name</td><td>{$firstname}</td></tr>
<tr><td id="dark">Place of Birth</TD><td>{$placeofbirth}</
td></tr>
<tr>
<td id="dark">Date of Birth (YYYY-MM-DD)</td>
<td><input type="text" onchange="return ValidDate(this)"
name="dob" size=10 value="" /></td>
</tr>
<tr><td id="dark">Age</td><td>{$age}</td></tr>
<tr><td id="light">Sex</td><td>{$sex}</td>
<tr><td id="dark">Nationality</td><td>{$nationality}</td></
tr>
<tr><td id="light">Jat(Tribe)</td><td>{$jat}</td></tr>
<tr><td id="dark">Religion</td><td>{$religion}</td></tr>
<tr><td id="light">Occupation</td><td>{$occupation}</td></tr>
</table>
</div>
<div id="rightDiv">
<table id="table_sub1">
<caption><h2>Family Information</h2></caption>
<tr><td id="light">Father's Last Name</td><td>
{$father_lastname}</td></tr>
<tr><td id="dark">Father's First Name</td><td>
{$father_firstname}</td></tr>
<tr><td id="light">Husband's Last Name</td><td>
{$husband_lastname}</td></tr>
<tr><td id="dark">Husband's First Name</td><td>
{$husband_firstname}</td></tr>
</table>
</div>
<div id="centerDiv">
<table id="main">
<caption><h2>Mailing Information</h2></caption>
<tr><td id="light">PS</td><td>{$ps}</td></tr>
<tr><td id="dark">PO</td><td>{$po}</td></tr>
<tr><td id="light">Village</td><td>{$village}</td></tr>
<tr><td id="dark">Address</td><td>{$address}</td></tr>
<tr><td id="light">Billing Address</td><td>{$billingaddress}
</
td></tr>
</table>
</div>
</div>
Any help is greatly appreciated. Thanks,
Andy
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
