Problem with <input> positioning in HTML/CSS

Question

Hey guys, I'm a total HTML and CSS noob who was just coding his offline website when he ran across a problem.

I have a div in which I have positioned several elements using absolute positioning. But when I try to position an input field, it does not vertically lign up with the other text. Here's an example:

<div id="TopBar">
[...]
<h2 class="SubTitle" style="position:absolute; top:50px; left:75%;">Username: </h2>
<input type="text" name="username" style="display:inline; positon:absolute; top:50px; right: 5%;" />

When i run this code, the input field is about 30 pixels further up than the "Username:". Why is that, even though both have "top: 50px"?

Through testing, I have discovered that the code works properly without the div around it. Why is that?

I know my coding is really bad, please explain to me what I did wrong.

Matthew Lehner · Accepted Answer · 2011-06-01 00:35:05Z

5

You have a spelling mistake in the tag. Fix "position" and it'll work for you!

answered Jun 1, 2011 at 0:35

Matthew Lehner

4,0573 gold badges30 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Problem with <input> positioning in HTML/CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related