Absolute positioning removes the div from the flow and positions the subsequent elements as though the positioned div was never there. Try this:
In #leftDiv replace the position:absolute with float:left. In #rightDiv replace the position:absolute with float:right. To each of those rules, add width:50%. In #centerDiv replace the position:absolute with clear:both. On Apr 17, 6:32 pm, Andrew Falanga <[email protected]> wrote: > 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] -~----------~----~----~----~------~----~------~--~---
