html / css problem

Question

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 problem: the validate-span is positioned to the very left border instead of right to the textbox. what is wrong?

thanks

unquoted attribute values are disgusting - even though html5 allows them — ThiefMaster
– ThiefMaster, Commented Jun 10, 2011 at 22:27
@anirudh4444 No, then you cannot set the width and height anymore. — jeroen
– jeroen, Commented Jun 10, 2011 at 23:00

jeroen · Accepted Answer · 2011-06-10 22:12:50Z

3

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.

answered Jun 10, 2011 at 22:12

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DanMan Over a year ago

Unless he really needs to have the block display, this is over-complicating things.

jeroen Over a year ago

@DanMan Personally I would add the background image to the parent element, which in my case would probably be li, but I haven´t seen the rest of the code.

thirtydot · Accepted Answer · 2011-06-10 22:12:54Z

1

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/

answered Jun 10, 2011 at 22:12

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Comments

RichieHindle · Accepted Answer · 2011-06-10 22:12:56Z

1

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

answered Jun 10, 2011 at 22:12

RichieHindle

283k49 gold badges367 silver badges408 bronze badges

Comments

rp. · Accepted Answer · 2011-06-10 22:13:42Z

1

Give the span a float:left too.

answered Jun 10, 2011 at 22:13

rp.

3,4751 gold badge23 silver badges29 bronze badges

Comments

WooDzu · Accepted Answer · 2011-06-10 22:22:34Z

1

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

U need float:left; for your span

edited Jun 10, 2011 at 22:22

answered Jun 10, 2011 at 22:16

WooDzu

4,8666 gold badges34 silver badges62 bronze badges

Collectives™ on Stack Overflow

html / css problem

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related