Sent by Chris Ovenden on 31 January 2006 07:07
(Taking it back onto the list, as others might be interested)
I don't know if you tried your first example in Firefox, but it worked
just fine. IE sometimes goes haywire on all-floated layouts, however,
and putting each line inside a block element was a pretty good cure.
The inputs don't need to be floated, however, and the number of divs
can be slimmed down a bit, like this:
<html>
<body>
<div><label style="width: 120px; float: left; clear:
left;">Label 1:</label>
<input style="width: 210px; " type="text"
id="input1" /></div>
<div><label style="width: 120px; float: left; clear:
left;">Label 2:</label>
<input style="width: 210px; " type="text"
id="input2" /></div>
</body>
</html>
Chris
On 1/30/06, Paul Kahl [EMAIL-REMOVED]> wrote:
> Actually, ignore my first email. This solution works great:
>
> <html>
> <body>
> <div style="clear: both; padding: 0px;">
> <div style="width: 120px; float: left;">Label 1:</div>
> <div style="width: 210px; float: left;"><input type="text"
> id="input1" value="1"/></div>
> </div>
> <div style="clear: both; padding: 0px;">
> <div style="width: 120px; float: left;">Label 2:</div>
> <div style="width: 210px; float: left;"><input type="text"
> id="input2" value="2"/></div>
> </div>
> </body>
> </html>
>
On 1/30/06, Paul Kahl [EMAIL-REMOVED]> wrote:
> How would you go about doing this? I haven't used the Clear property before,
> and I've always had issues with Float.
>
> I tried this:
>
> <html>
> <body>
> <div style="width: 120px; float: left; clear: left;">Label 1:</div>
> <div style="width: 210px; float: left;"><input type="text"
> id="input1"/></div>
> <div style="width: 120px; float: left; clear: left;">Label 2:</div>
> <div style="width: 210px; float: left;"><input type="text"
> id="input2"/></div>
> </body>
> </html>
>
> but I wound up with "Label" and both input fields on one line, and "Label2"
> on the next line.
>
> How would I set that up, without having to do absolute positioning, just
> with float and clear, so that Label and Label 2, and their respective
> inputs, were on a total of two lines, like:
>
> Label: input1
> Label2: input2
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
