html / css problem

i'm trying to achieve the following (for building a form):

Name: [        ] *

my markup is:

<label>Name:</label>
<input type=text name=name>
<span class=validate></span>

my css is:

label
{
    display:block;
    width:50px;
    float:left;
}
input
{
    float:left;
}
span.validate
{
    display:block;
    background-image:url(img/required.png);
    width:16px;
    height:16px;
}

the 开发者_如何学Goproblem: the validate-span is positioned to the very left border instead of right to the textbox. what is wrong?

thanks

You are using display: block on your span, so it will automatically go to a new line. You can change it to inline-block or float it as well.

You need to also add float: left to your span.validate.

See: http://jsfiddle.net/8jDjq/

But, that won't look right if you add another set of the elements underneath: http://jsfiddle.net/8jDjq/2/

To fix that, you need to add clear: both to label: http://jsfiddle.net/8jDjq/3/

You need to float:left the validate span (or reconsider those display:blocks, but I guess they're there for a good reason).

Give the span a float:left too.

span.validate
{
    display:block;
    background-image:url(img/required.png);
    width:16px;
    height:16px;
    float:left;
}

U need float:left; for your span