css positioning: help me find a better/more elegant solution.

[sagejoshua]

Hi,

For a real-estate site that I maintain, I created a mortage calculator
which opens via javascript into a 350px wide window. I'm getting into
the new school of XHTML/CSS instead of my old <table>'s and <div
align="">'s for positioning.

Here's a sample of the calculator's HTML (simplified):

<div id="calc">
<h1>Monthly Payments Calculator</h1>
<div class="contain">
<label for="price">Closing Price:</label>
<input name="price" id="price" />
</div>
<div class="contain">
<label for="dp">Down Payment:</label>
<input name="dp" id="dp" />
</div>
</div>


And here's the CSS:

#calc {
width: 330px;
}
#calc h1 {
text-align: left;
margin: 0 0 1em 0;
}
#calc div.contain {
position: relative;
width: 100%;
margin: 1em 0;
}
#calc input {
display: block;
position: absolute;
right: 0;
top: 0;
}
#calc label {
display: block;
width: 40%;
position: abolute;
left: 0;
top: 0;
font: 80% Verdana,sans-serif;
}

////////////////

So here's my question. Is there a more elegant, simpler way to
correctly position the <labels> directly across from the <inputs>
without using the container divs?

With tables, I would have used <tr valign="top"> and <div
align="left/right">. This is what I came up with for CSS. Is there a
better way?

Thanks for yer time.

-Josh

 

[Leif K-Brooks]

Here's a sample of the calculator's HTML (simplified):

<div id="calc">
<h1>Monthly Payments Calculator</h1>
<div class="contain">
<label for="price">Closing Price:</label>
<input name="price" id="price" />
</div>
<div class="contain">
<label for="dp">Down Payment:</label>
<input name="dp" id="dp" />
</div>
</div>

Looks like tabular data to me. Tables are designed for tabular data.

 

[sagejoshua]

Looks like tabular data to me. Tables are designed for tabular data.

Hmm, you may be right. But I guess the question still remains for me:
consider the same situation with non-tabular data. Is what I've come
up with the best/most efficient way to position the elements? Is there
a way to have everything square up w/o the container divs?

Thanks,
-josh