Question

I am building a form. I’ve used divs with absolute positioning to determine the layout of my form. I’m now trying to put a formset around each group of divs, problem is that the formset creates a line but it doesn’t stretch over all the divs – I’m guessing b/c they are positioned absolutely. Here is an example of my code:

<div>
    <fieldset id="BasicInfo">
    <legend>Basic Info.</legend>
    <div id="first_name" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 13px; top: 82px">
        First Name:</div>
    <div id="first_name_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 136px; top: 82px">
    </div>
    <div id="last_name" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 313px; top: 82px">
        Last Name:</div>
    <div id="last_name_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 435px; top: 82px">
    </div>
    <div id="gender" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 613px; top: 82px">
        Gender:</div>
    <div id="gender_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 738px; top: 82px">
    </div>
    <div id="dob" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 14px; top: 120px">
        Date of Birth:
    </div>
    <div id="dob_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 136px; top: 120px">
    </div>
    <div id="age" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 313px; top: 120px">
        Age:</div>
    <div id="age_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 435px; top: 120px">
    </div>
    <div id="intended_major" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 613px; top: 120px">
        Intended Major:</div>
    <div id="intended_major_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 738px; top: 120px">
    </div>
    <div id="email" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 13px; top: 162px">
        Email:</div>
    <div id="email_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 136px; top: 162px">
    </div>
    <div id="phone" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 313px; top: 162px; right: 561px;">
        Phone:</div>
    <div id="phone_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 435px; top: 162px">
    </fieldset>
    </div>

Answer 1

You are guessing correct. Absolute positioning takes the element out of normal flow and it positions it on it’s own level at top:0;left:0 relative the container parent that has a position:relative set – if no position:relative is set it’s relative to the body. If you don’t define a height for the parent div it will get a 0 (or 1px or default font-size height – depending in which browser you look in). I don’t see the need for absolute positioning.

Try something like this:

/* css */
.label {float:left;width:auto;}
.input {float:left;width:auto;}
.clear {clear:both;height:1px;font-size:1px;line-height:1px;} /* 1px line clear */

/* html */

<form>
<fieldset>
<div class="field">
<div class="label"><label>Username:</label></div>
<div class="input"><input type="text" /></div>
<div class="clear"></div>
</div>
</fieldset>
</form>

I often use this kind of layout to structure complex forms since you can easly include validators, hints and other additional elements, if you need them.
Also writing inline css can get really nasty once you have to change the design. Use classes instead.