Posted by sagejoshua on 10/10/05 06:52

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

[Back to original message]