|
Posted by Ben C on November 11, 2006, 12:41 pm
Please log in for more thread options
> I have the following code to align some form controls:
><style type="text/css">
> .label {float:left; width:50%}
> .input
Do you mean input, rather than .input?
></style>
>
><div>
> <div class="label">Enter your username:</div>
> <input type="text" name="username"/>
></div>
>
><div>
> <div class="label">Enter your password:</div>
> <input type="text" name="password"/>
></div>
>
> This works fine until the font size is increased so that the label text
> wraps onto a new line. This causes the next label to be floated NEXT to
> the wrapped label, rather than underneath since there is now space next
> to the new line, rather than is being occupied by the input box.
>
> This is easily fixed by specifying "clear:both" in the .label css.
>
> However, I now need an totally unrelated floated image to the left of
> all this lot elsewhere on the page, and the clear is obviously pushing
> the labels right down underneath this image
>
> Is there any way to clear only LOCAL floats (ie in the same div)?
No.
> If not, then can someone suggest a different design to achieve the same
> result (ie lined up inputs) without resorting to tables?
You can use absolute positioning. To cope with huge text sizes, I think
it's easiest to keep the .labels in the normal flow, but put the inputs
inside them and use the normal flow positions of the .labels as
reference points for positioning the inputs.
Like this:
<style>
.label
{
width: 50%;
position: relative; /* so it's a container for the input */
}
input
{
position: absolute;
left: 100%; /* 100% of container's width from left
of container-- i.e. sticking out on the
right */
top: 0;
}
</style>
</head>
<body>
<div>
<div class="label">Enter your username:
<input type="text" name="username"/>
</div>
</div>
<div>
<div class="label">Enter your password:
<input type="text" name="password"/>
</div>
</div>
</body>
| 
XML Sitemap